ReactでuseCallbackを正しく使用する方法は何ですか？

1年 ago
桜, 春樹
1 minute

useCallbackは、関数をキャッシュするためのHookであり、関数コンポーネントで子コンポーネントの再レンダリングを引き起こす関数の再作成の問題を解決するために使用されます。 useCallbackを適切に使用することで、パフォーマンスを向上させ、不要なレンダリングを回避することができます。

useCallbackは、関数と依存配列の2つの引数を受け取ります。依存配列の値が変化すると、関数が再作成されますが、変化がない場合はキャッシュされた関数が返されます。

以下は、useCallbackを正しく使用する方法を示す例です。

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

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

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={handleClick}>Increase Count</button>
    </div>
  );
};

export default App;

上記の例では、handleClick関数はcountが変化するときに再作成され、そうでなければキャッシュされた関数が返されます。これにより、不要なレンダリングを回避し、パフォーマンスを向上させることができます。

bannerAds