React Hooks (useMemo, useCallback)

Goal

前回のuseState、useEffectの位置決めに続いて.useMemouseCallbackについて説明します.

useMemo

useMemoコメントの値を返します.

const memo = useMemo(() => {
   return memoizedValue(value)
}, [value])

useMemoは、コールバック関数および依存配列を受け入れる.
コールバック関数には、useMemoが返す値を生成する関数が含まれます.また、依存配列の値が変更された場合にのみ、コメントの値が再計算され、返されます.useMemoを使用する理由は、高コスト計算を防止するためです.
すべてのレンダリングではなく依存性が変更された場合にのみ値が返され、最適化や不要な計算が回避されます.
依存性に空の配列が含まれている場合、レンダーごとに新しい値が計算されます.useMemoを使用する場合を例に挙げて説明します.

const Example = () => {
  const [color, setColor] = useState<string>("");
  const [movie, setMovie] = useState<string>("");

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.id === "movie") setMovie(e.target.value);
    else setColor(e.target.value);
  };

  const getMovieValue = (movie: string) => {
    console.log("영화");
    switch (movie) {
      case "action":
        return "액션";
      case "comedy":
        return "코미디";
      default:
        return "로맨스";
    }
  };

  const getColorValue = (color: string) => {
    console.log("색깔");
    switch (color) {
      case "red":
        return "빨강";
      case "yello":
        return "노랑";
      default:
        return "예쁜 색깔";
    }
  };

  const colorValue = getColorValue(color);
  const movieValue = getMovieValue(movie);

  return (
    <div>
      <input onChange={onChange} id="movie" type="text" />
      <input onChange={onChange} id="color" type="text" />
      <p>{movieValue}</p>
      <p>{colorValue}</p>
    </div>
  );
};
export default Example;

入力映画および色値出力のReact例.
この例を実行すると、次の結果が得られます.

見えましたか.movieおよびcolorでは、1つの値を変更すると、2つの関数が実行され、console.logが出力される.
上記の例useMemoを用いて最適化を行うことができる.

const colorValue = useMemo(() => getColorValue(color), [color]);
const movieValue = useMemo(() => getMovieValue(movie), [movie]);

useMemoを使用すると、最適化が良好であることが確認できます.
再計算された関数が現在のように簡単であれば、大きな問題はありませんが、再計算された関数が非常に複雑であれば、不要な高価な費用が発生します.useMemoを使用すると、このような不要な高価な費用が発生することを防止することができる.

useCallback

useCallbackは、記録された関数を返します.useMemoとの違いは、戻り関数か戻り値かです.

const memoizedFuntion = useCallback(fn, deps)

更新