問題一覧に戻る
上級パフォーマンス最適化
問題82: useCallback

不要な再レンダリングを防ぐためにuseCallbackで関数をメモ化する方法を学びます。関数はメモ化しない限り、毎回のレンダリングで再作成されます。メモ化された子コンポーネントにコールバックを渡す際に必須です。依存配列が関数の再作成タイミングを決定します。関数参照の変更による子コンポーネントの再レンダリングを防ぎます。

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

{/* 子コンポーネントをメモ化 */}
const ExpensiveChild = (({ onClick, text }) => {
  console.log('Child rendered');
  return <button onClick={onClick}>{text}</button>;
});

function Parent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('Click me');

  {/* コールバック関数をメモ化 */}
  const handleClick = (
    () => {
      console.log('Clicked:', text);
    },
    []
  );

  {/* メモ化なし */}
  const badClick = () => {
    console.log('Bad click');
  };

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <ExpensiveChild onClick={} text={text} />
    </div>
  );
}

export default Parent;