応答性の最適化

構成部品サブスクリプションのステータス値が変更されたり、親から受け取ったPropsが変更されたり、親構成部品が再レンダリングされたりした場合、構成部品は再レンダリングされます.
Reactでは、親子関係によって不要なレンダリングが発生しないようにする必要があります.

React.memo

memoは構成部品をレンダリングし、結果にコメントします.また、次のレンダリング時にpropsが同じである場合、reactはコメントされた内容を再使用します.

import { memo } from "react";

const User({ user }) {

  return (
    <div className="item">
      <div>이름: {user.name}</div>
      <div>나이: {user.age}</div>
    </div>
  );
}

export default memo(User);

以上のソースコードから,memoを用いてユーザコンポーネントを包む.user propsが変わらない場合、コメントはタグされた結果を再使用します.

useMemo

キャッシュreactでCPUが消費する重大な関数です.構成部品では、関数が値を返すと、値が変化しなくても再レンダリングされ、関数を再呼び出すと大量のリソースが浪費されるため、使用する関数の依存値が変わらない場合は、再呼び出さずにキャッシュされた値が使用されます.

const MyComponent({ x, y }) { 
  const z = useMemo(() => compute(x, y), [x, y]); 
  return <div>{z}</div>; 
}

上のソースコードを見ると,x,yを依存値とする.すなわち,x,yの値が変化しない場合,reactは以前の関数を呼び出して計算するのではなく,以前に覚えたz値を再利用する.
すなわち,単純な関数に比べて複雑な演算を行う関数では演算をやり直す必要がなく,以前の戻り値を記憶するため,性能上多くの利点が見られる.

useCallback

useMemoが返す値memorizeの場合、useCallbackはmemorizeを関数として宣言します.既存の関数は、再レンダリング時に再生成されるため、依存値が変わらない場合はキャッシュされて使用されます.

const onChange = useCallback(
    e => {
      const { name, value } = e.target;
      setInputs({
        ...inputs,
        [name]: value
      });
    },
    [inputs]
  );

n/a.結論

useCallback, useMemo, React.memoはいずれも性能面のメリットをもたらすことができるが,単純な関数と複雑でない演算を無条件に使用すると,最適化コストがかえって高くなり,性能が悪くなる可能性がある.
つまり、いつどこで使うかを判断し、適切な場所で使うことで、より多くの光を見ることができるということです.