useMemo と useCallback は 2 つの強力な React フックで、不必要な再レンダリングを防止してコンポーネントのパフォーマンスを最適化する上で重要な役割を果たします。これらは、開発者が応答性が高く効率的な React アプリケーションを作成するために不可欠なツールです。

このガイドでは、useMemo と useCallback の類似点と相互の違いについて詳しく説明します。それらを実装する方法と、それぞれをいつ使用するかを理解します。

なぜ useMemo または useCallback を使用する必要があるのですか

通常、React ではほとんどの計算が高速ですが、非常に大きな配列の計算や、再レンダリングのたびに実行する必要のない高価な計算が必要になる場合があります。

useMemo フックと useCallback フックは、再レンダリングの間に高価な計算をキャッシュすることで、この問題の解決に役立ちます。

useMemoとは何か、そしてその使い方。

useMemo は再レンダリング間の計算結果をキャッシュする React フックで、2 つの引数を取ります:

• TranslatedValue: キャッシュする値を計算する関数。関数はパラメータを受け入れず、純粋である必要があり、あらゆる種類の値を返す必要があります。 React は、依存関係が変更されていない場合は同じ計算結果を返します。そうでない場合は、新しい結果を計算してキャッシュします。
• 依存関係: ステート変数、定数、関数呼び出しからの、計算値内にあるすべてのリアクティブな値参照のリスト。 React は、Object.it 比較を使用して、各 reactive 値を以前の値と比較しようとします。

useメモの使用法

再レンダリングの間に計算をキャッシュするには、コンポーネントのトップレベルで useMemo フックをラップします。

useMemo(fn, 依存関係)

const App = () => {
  const useMemo(() => {
    filterTodo(todos, tab)
  }, [todos, tab])
  return(...)
}

export default App

useMemo の最初のパラメーターはパラメーターのない関数であることに注意してください。

初めて React は useMemo の最初のパラメーターの結果値を計算し、次に依存関係のリストである 2 番目のパラメーターをメモ化します。 React は、再レンダリングの間に計算結果をキャッシュし、依存関係の値の 1 つが変更された場合にのみ結果を再計算します。

useCallbackとは何か、そしてその使用方法。

useCallback フックは useMemo フックと同じですが、このフックは値を計算せずに関数 (useCallback の最初のパラメーター) をキャッシュする点が異なります。また、この関数は useMemo.

useCallback を使用するには、パラメータを渡す必要があります:

• キャッシュする必要がある関数定義。
• 依存関係のリスト

const queuedFn = useCallback(fn, 依存関係)

import { useCallback } from 'react';

export default function ProductPage({ productId }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/'   productId   '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

useCallback ではなく useMemo を使用する場合

計算結果の最適化を主に考慮している場合は、useMemo を使用してください。
関数の変更による不必要な再レンダリングの防止を主に考慮している場合は、 useCallback.

コンポーネントの再レンダリングをスキップする

場合によっては、親コンポーネントを再レンダリングする必要があり、その結果、子コンポーネントも再レンダリングされます。 memo.

テーマ状態を持つ Todolist コンポーネントと、子として List コンポーネントがあると仮定します。テーマの状態が変化するたびに、リスト コンポーネントが再レンダリングされますが、これは必要ありません。この問題を解決するには、memo.

List の機能コンポーネントをメモでラップします。

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    

      
  );
}

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

結論

この包括的なガイドでは、useMemo フックと useCallback フック、それぞれの使用方法、それぞれをいつ使用するかを理解し、React アプリケーションのパフォーマンスを最適化するための利点について説明しています。