「useCalback,useMemo」関数と計算値の繰り返し使用

useMemo
useMemoを使用して、以前に計算した値を再使用できます.

useMemo(함수, [deps])

主にパフォーマンスの最適化が必要な場合に使用されます.
deps配列の値が変化した場合にのみ実行されます.
すなわち,特定の値が変化した場合にのみ関数を実行して演算を処理する.
値を変更しない場合は、以前の値を直接インポートして再使用できます.

const count = useMemo( 
    () => countActiveUsers(users), [users]);

ユーザが変更した場合にのみ、数の関数が実行されます.
変更しない場合は、以前に計算した値を再使用します.
React.memo
コンポーネントを再レンダリングする必要がない場合は、以前の値を使用します.
(構成部品を再使用して値をレンダリング)
propsが変更された場合にのみレンダリングされるため、レンダリングを最適化できます.
🔥 構成部品の作成とエクスポート時に反応します.memoで包んでください.

export default React.memo(CreateUser);

propsを比較し、以前の状態と同じ場合はレンダリングしないことを指定できます.

export default React.memo(UserList, 
     (preProps, nextProps) =>
      preProps.users === nextProps.users);

useCallback
これにより、以前に作成した関数を再作成する必要がなくなります.useCallback(함수, [deps])useMemoと似たような役割を果たしていますが、関数に設定されているhookであることを覚えておけば大丈夫です.
useCallbackを使用して関数のpropsを変更しない場合は、仮想ドームでの再レンダリングを回避できます.

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

// 기존에 만들어 둔 함수를 감싸주면 된다.
// [변경 후 : 의존하고 있는 inputs 값을 deps에 넣어주었다.]
const onChange = useCallback(e => {
  const {name,value} = e.target;
  setInputs({
    ...inputs,
    [name] : value
  });
}, [inputs]);

🚨 ただし、useCallbackとuseMemoを使用すると必ずしもパフォーマンスが向上するとは限りません.

は、かえって不要なコードをより多く呼び出します.

したがって、構成部品を最適化できる場合にのみ使用する必要があります.