ReactのuseCallbackフックの使い方は何ですか？

1年 ago
桜, 春樹
1 minute

useCallbackはReactのフックの1つであり、パフォーマンスを最適化するために使用されます。その役割は、関数をキャッシュして、コンポーネントが再レンダリングされる際に新しい関数インスタンスが作成されないようにします。

useCallback関数は、コールバック関数と依存配列の2つのパラメータを受け取ります。依存配列内の依存関係が変化したときに、コールバック関数を再作成します。依存配列が空の場合、コールバック関数はコンポーネントの初回レンダリング時にのみ作成されます。

useCallbackを使用するシチュエーションは、以下の通りです。

  1. 子コンポーネントにコールバック関数を渡して、不要な再レンダリングを回避します。
  2. コールバック関数をエフェクトの依存関係として渡すことにより、エフェクトが特定の依存関係のみ変化した場合にのみ実行されるようにします。
  3. memoを使用してコンポーネントの最適化を行う際、コールバック関数をmemoに第2引数として渡すことで、コールバック関数が変更された場合にのみコンポーネントを再レンダリングするようにする。

コードの例：

import React, { useCallback } from 'react';

const MyComponent = () => {
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

  return (
    <button onClick={handleClick}>Click me</button>
  );
};

上記の例では、handleClick関数はコンポーネントの最初のレンダリング時にのみ作成され、コンポーネントが再レンダリングされても新しいインスタンスが作成されることはありません。

bannerAds