React メモ化チートシート

React は、不必要な再レンダリングと再計算を最小限に抑えてコンポーネントのパフォーマンスを最適化するためのメモ化用の 3 つの主要なツールを提供します。

1. useMemo – 計算された値をメモ化する

• 目的: 計算の結果をキャッシュし、依存関係が変更された場合にのみ再計算します。

• 使用法: 特定の依存関係でのみ更新する必要がある高価な計算または派生データに使用します。
  

  const memoizedValue = useMemo(() => complexCalculation(), [dependencies]);
  
  

• ベストプラクティス:

  • 関数内で使用されるすべての依存関係を依存関係配列に含めます。
  • useMemo 内で新しい参照 (配列、オブジェクト) やインライン関数を作成することは避けてください。
  • 注意: 関数には useMemo を使用しないでください。関数参照ではなく値をキャッシュします。

2. useCallback – Memoize 関数リファレンス

• 目的: 関数参照をキャッシュし、レンダリングごとに再作成されないようにします。

• 使用法: 安定した関数参照、特に子コンポーネントに渡されるコールバック (イベント ハンドラーなど) に使用します。
  

  const memoizedFunction = useCallback(() => { /* logic */ }, [dependencies]);
  
  

• ベストプラクティス:

  • 値が古くならないように、関数内で使用されるすべての依存関係を依存関係配列に含めます。
  • メモ化が中断される可能性があるため、useCallback 内でインライン関数を宣言することは避けてください。
  • 注: useCallback は関数にのみ使用してください。値に useCallback を誤って使用すると、不要な関数呼び出しを含む非効率なコードが生成されます。

3. React.memo – コンポーネント全体をメモ化する

• 目的:プロパティが変更されていない場合、機能コンポーネントが再レンダリングされるのを防ぎます。

• 使用法: 親が変更されたときに再レンダリングする必要のない子コンポーネントを最適化するために使用します。
  

  const MemoizedComponent = React.memo(ChildComponent);
  
  

• ベストプラクティス:

  • 安定した props またはめったに変更されない props を受け取るコンポーネントで使用します。
  • React.memo の効果を最大化するために、プロパティ (新しいオブジェクト/配列など) の頻繁な変更を避けてください。
  • 注: useCallbackmemoized 関数と併用すると、子コンポーネントに渡される安定した props を維持できます。

---

覚えておくべき重要なポイント

• 値には useMemo を使用します、関数には useCallback を使用します。
  • 関数に useMemo を使用する と、安定した関数参照ではなく即時に実行されます。
  • 値に useCallback を使用すると 関数が返され、余分な関数呼び出しを含む非効率なコードが生成されます。
• メモ化の概要:
  • useMemo: 計算値 (関数の戻り値) をキャッシュします。
  • useCallback: 関数参照 (コールバック) をキャッシュします。
  • React.memo: プロパティに基づいてコンポーネント全体をキャッシュし、親の更新による再レンダリングを防ぎます。
• メモ化を選択的に使用する: メモ化は正しく使用するとパフォーマンスが向上しますが、使いすぎたり誤用すると複雑さが増す可能性があります。

以上がReact メモ化チートシートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。