React 的第七個 hook：useMemo

還是跟效能有關。

簡述

把元件中的 function 的「回傳值」記住，只有 dependencies 改變時才會重新執行 function。

（或也不一定要是 function，只要是「複雜的求值運算」都可以包在 useMemo 裡面）

再強調一次，是元件中的 function 的「回傳值」，不要搞錯了。

這是通常用來避免子元件被 re-render 時，把原本不需要重新計算的的 function 又重新計算，造成耗費效能的問題。

直接來示範用法：

// 第一個 component
const ComponentWithoutUseMemo = () => {
  const counter = useRef(0);
  const myFunction = () => {
    // 如果重新執行的話，計數器就會遞增
    counter.current++;
    return 1;
  };

  const value = myFunction();

  return (
    <div>
      ComponentWithoutUseMemo 中的 function 已經被執行了 {counter.current}{" "}
      次，回傳值為 {value}
    </div>
  );
};
// 第二個 component
const Component = () => {
  const counter = useRef(0);
  const myFunction = () => {
    // 如果重新執行的話，計數器就會遞增
    counter.current++;
    return 1;
  };

  // 用 useMemo 把回傳值記起來
  // 這邊設定空的 dependencies，因為固定只會回傳 1 而已
  const value = useMemo(() => {
    return myFunction();
  }, []);

  return (
    <div>
      Component 中的 function 已經被執行了 {counter.current} 次，回傳值為{" "}
      {value}
    </div>
  );
};

function App() {
  const [value, setValue] = useState();
  const handleChange = (e) => setValue(e.target.value);

  return (
    <div className="app">
      <input type="text" value={value} onChange={handleChange} />
      <ComponentWithoutUseMemo />
      <Component />
    </div>
  );
}