React のパフォーマンスの向上: useCallback と useMemo フックの比較

React の useCallback フックと useMemo フックは、アプリケーションのパフォーマンスを最適化するために重要です。これらをいつどのように使用するかを理解すると、不必要な再レンダリングを回避し、アプリをスムーズに実行できるようになります。この記事では、useCallback と useMemo を効果的に使用する実際の例を詳しく見ていきます。

useCallback を使用する場合

useCallback フックはコールバック関数のメモ化されたバージョンを返します。つまり、依存関係の 1 つが変更された場合にのみ関数を再作成します。これは、関数を props として子コンポーネントに渡し、不必要な再レンダリングを防ぐ場合に特に便利です。

リアルタイムの例: 不必要な再レンダリングの防止

子コンポーネントに関数を渡す親コンポーネントがあるとします。 useCallback を使用しないと、関数ロジックが変更されていない場合でも、親コンポーネントがレンダリングされるたびに子コンポーネントが再レンダリングされます。

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  // Using useCallback to memoize the function
  const handleIncrement = useCallback(() => {
    setCount(count   1);
  }, [count]);

  return (
    

      
Count: {count}
      
  );
};

export default ParentComponent;

上記の例では、handleIncrement が useCallback でメモ化されています。 ChildComponent はカウントが変更された場合にのみ再レンダリングされるため、不必要な再レンダリングが防止され、パフォーマンスが向上します。

useMemo を使用する場合

useMemo フックは関数の結果をメモ化するために使用され、依存関係の 1 つが変更された場合にのみキャッシュされた結果を再計算します。これは、関数が負荷の高い計算を実行する状況でパフォーマンスを最適化するのに役立ちます。

リアルタイムの例: 高価な計算の最適化

大きなリストのフィルタリングなど、計算量の多い操作を実行するコンポーネントがあるとします。

import React, { useState, useMemo } from 'react';

const ExpensiveComponent = ({ items }) => {
  const [filter, setFilter] = useState('');

  // Using useMemo to optimize expensive filtering
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    

       setFilter(e.target.value)}
        placeholder="Filter items"
      />
      

        {filteredItems.map((item, index) => (
          
{item}
        ))}
      
  );
};

export default ExpensiveComponent;

この例では、useMemo を使用して、項目配列のフィルター処理の結果をキャッシュします。こうすることで、高価なフィルタリング操作は項目またはフィルタが変更された場合にのみ再計算され、不必要な計算が回避されます。

useCallback と useMemo の使用に関するガイドライン

• 不要な再レンダリングを避けるために、子コンポーネントに関数を渡すときは useCallback を使用してください。
• レンダリングのたびに再計算する必要のない高価な計算には useMemo を使用します。
• 過度の使用は避けてください。 メモ化すると複雑さが増し、コードが読みにくくなる場合があります。パフォーマンスの問題を特定した場合にのみ使用してください。
• 依存関係の配列を覚えておいてください。 依存関係は常に正確に指定してください。そうしないと、バグや予期しない動作が発生する可能性があります。

結論

React の useCallback フックと useMemo フックは、不必要な再レンダリングや高価な計算を回避してコンポーネントのパフォーマンスを最適化するための強力なツールです。これらのフックを慎重に適用することで、React アプリケーションを効率的に実行できます。