【図解で深める】useMemoとuseCallbackの違いと使い方

1. 前提条件

1.1 著者の知識レベル

ReactのuseStateやuseEffectフックには慣れはじめたが、他のフックについてはまだ完全に理解できているとは言えない状態。

1.2 この記事で出てくる重要な単語の定義

• レンダリング: コンポーネントがJSXを返し、実際のDOMに反映されること
• フック: 関数コンポーネントにステートや副作用などの機能を追加するための関数
• パフォーマンス最適化: アプリケーションの速度や効率を改善すること
• メモ化: 計算結果や関数を保存し、再利用すること
• コールバック関数: 他の関数に引数として渡される関数

2. 結論

1. useMemoとuseCallbackはどちらもメモ化を利用してパフォーマンスを改善するフックである。
2. useMemo: 計算コストの高い関数の「結果」をメモ化する。
3. useCallback: 「コールバック関数」をメモ化する。子コンポーネントに関数の参照を渡さない場合は使わなくてよい。

3. 図解