为什么使用 useRef (initialValue) 而不是 useMemo()？

Question

As far as I understand, another purpose of useRef(initialValue) is to keep a variable whose reference address does not change whenever a re-render of that component in the function component.

However, the same can be done with useMemo(). What's the difference between the two? which one is more performance.

import React, { useState, useMemo, useEffect, useRef } from 'react';

function App() {
  const [count, setCount] = useState(0);
  
  const myObj = useMemo(() => ({current: 0}), [])
  const myRef = useRef(0)

  useEffect(() => {
    myObj.current = myObj.current + 1;
    myRef.current = myRef.current + 1;
  })

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increase Count Number </button>
      <span>{myObj.current}</span>
      <span>{myRef.current}</span>
    </div>
  );
}

export default App;

Answer 1

useMemo is intended to memoize the functions that are being called inside its argument function.

The way you're using it, the return value of useMemo is equivalent to the one of useRef .
However it won't make sense to the next person that'll read it, as this is not the case that useMemo is meant to be used in:

1. The function has absolutely no reason to be memoized.
2. The dependency array is empty, hence the function is only being called once.

Answer 2

Technically both can be interchanged as far as the dependency array is empty for useMemo . But if you want to recalculate the value based on a certain prop or state variable change you can use useMemo by putting them in the dependency array

Technically same expressions

const ref = useRef(computeExpensiveValue(a, b));

const memoizedValue = useMemo(() => computeExpensiveValue(a, b));


// in above - ref.current and memoizedValue will be same

But if we want to recalculate the value if a or b changes then we should useMemo like below

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);