再レンダリングの最適化に使う「メモ化」系の機能について、自分用に整理。
言葉だけだと混乱しがちなので、それぞれの目的・使いどころ・注意点も一緒に記載

🔁 そもそも「メモ化」とは？

同じ入力に対して同じ出力が返る処理において、その結果をキャッシュして使い回すこと。
Reactでは、再レンダリングのたびに同じ関数や計算結果を無駄に再生成しないために使う。

useCallback：関数のメモ化

const memoizedFn = useCallback(() => {
  // 関数の処理
}, [依存値])

const memoizedValue = useMemo(() => {
  return 高コストな計算()
}, [依存値])

const SomeComponent = React.memo((props) => {
  return <div>{props.text}</div>
})

「なぜ React は最初から全コンポーネントに React.memo を適用しないのか？」

比較処理（props の shallow compare）にコストがかかる
- React.memo は props の変更を比較して「再レンダリングすべきかどうか？」を判断する
- この「比較」は shallow（浅い）とはいえ、オブジェクトや配列などがあると毎回それを走査することになる
- コンポーネント数が多かったり、props が複雑だったりすると逆に処理が重くなる
- 結果、描画回数が減っても比較のコストが上回ればパフォーマンスが悪化するケースもある
純粋な関数コンポーネント（＝副作用がない）なら再レンダリングしても問題ないことが多い
- 状態や副作用がない「プレゼンテーショナルコンポーネント」は軽い処理が多く、再レンダリングしても負荷は大きくない
- なのでReact は「不要な最適化はしない。必要になったら自分でやってね」という方針を取っている