React の &#useCallback&# とは何ですか?

useCallback は、コールバック関数をメモ化することでコンポーネントを最適化するのに役立つ React フックです。これにより、依存関係が変更されない限り、関数参照がレンダリング間で同じままになることが保証されます。これは、子コンポーネントの useEffect フックの不必要な再レンダリングや再実行を防ぐため、関数を prop として子コンポーネントに渡す場合に特に便利です。

---

useCallback を使用する理由

1. 不必要な再レンダリングの防止:
   コールバック関数をプロパティとして子コンポーネントに渡すと、その関数はレンダリングのたびに再作成されます。これにより、子コンポーネントが不必要に再レンダリングされる可能性があります。

2. 安定関数参照:
   子コンポーネントが useEffect を使用し、コールバック プロパティに依存している場合、不安定な関数参照により useEffect が不必要に再実行されます。

3. パフォーマンスの最適化:
   同じ関数の頻繁な再作成によって引き起こされる高コストの計算や操作を防ぐのに役立ちます。

---

構文

const memoizedCallback = useCallback(
  () => {
    // Your logic here
  },
  [dependencies] // Array of dependencies
);

• コールバック関数: メモ化する関数。
• 依存関係: 関数が依存する値。これらが変更された場合、関数は再作成されます。

---

useCallback を使用しない例

import React, { useState, useEffect } from "react";

const Child = ({ callback }) => {
  useEffect(() => {
    callback(); // Runs whenever the `callback` reference changes
  }, [callback]);

  return <div>Child Component</div>;
};

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

  const callback = () => {
    console.log("Callback called");
  };

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child callback={callback} />
    </div>
  );
};

export default Parent;

• 問題: カウントが変わっても、親がレンダリングするたびにコールバック関数が再作成されるため、子コンポーネントの useEffect が再実行されます。

---

useCallback による修正

import React, { useState, useEffect, useCallback } from "react";

const Child = ({ callback }) => {
  useEffect(() => {
    callback(); // Runs only when `callback` changes
  }, [callback]);

  return <div>Child Component</div>;
};

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

  const callback = useCallback(() => {
    console.log("Callback called");
  }, []); // Dependencies are empty, so the callback is memoized

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child callback={callback} />
    </div>
  );
};

export default Parent;

• 解決策: これで、コールバック参照は安定したままになるため、子コンポーネントの useEffect が不必要に再実行されなくなります。

---

useCallback をいつ使用するか?

• 関数をプロパティとして子コンポーネントに渡す場合。
• 子コンポーネントが最適化のために React.memo() を使用する場合。
• 子コンポーネントが関数を使用する useEffect に依存している場合。

---

一般的な誤用

すべての関数で useCallback を

使用しないでください。次の場合にのみ有益です:

関数は prop として子に渡されます。
関数を再作成するには計算コストがかかります。

以上がReact の &#useCallback&# とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。