メモ化とは

<aside> 💡 関数内における任意のサブルーチンを呼び出した結果を後で再利用するために 保持しておき、その関数が呼び出されるたびに再計算されることを防ぐ、 プログラム高速化の手法のこと

</aside>

useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• 第1 引数に実行したい関数、第2 引数にその依存配列を渡してる
• 関数の実行結果をメモ化するHooks API
• 配列が渡されなかった場合は、新しい値がレンダーごとに毎回計算される

**useMemo はパフォーマンス最適化のために使うものであり、意味上の保証があるものだと考えないでください。**将来的に React は、例えば画面外のコンポーネント用のメモリを解放するため、などの理由で、メモ化された値を「忘れる」ようにする可能性があります。useMemo なしでも動作するコードを書き、パフォーマンス最適化のために useMemo を加えるようにしましょう。

useCallback

const reset = useCallback(() => setTimeLeft(limit), [limit]);

• コンポーネントのprops であるlimit が変わったときだけ、reset() が再定義されるようになる。
• 依存関係を適切化して不要な再レンダリングを避けるためにも用いられる

useRef

const inputRef = useRef<HTMLInputElement>();

• useRef で生成したref オブジェクトinputRef をJSX の<input> 要素のref 属性に代入すると この<input> のリアルDOM のノードがinputRef.current で参照できるようになる
• 再レンダリングを伴わずに何らかのデータを関数コンポーネントで保存しておきたいケース