React Hook useState で発生する、状態更新関数の複数回呼び出しによる複数回のレンダリング問題

2024-04-02

React Hook useState で発生する、状態更新関数の複数回呼び出しによる複数回の再レンダリング問題について

useState Hook でコンポーネント状態を更新する際、同じ関数内で複数回呼び出すと、意図せず複数回のレンダリングが発生してしまうことがあります。これはパフォーマンスの低下や予期せぬ動作につながる可能性があります。

原因

useState Hook は状態更新関数を返します。この関数は、引数として渡された新しい状態に基づいて、状態を更新します。しかし、同じ関数内で複数回呼び出すと、それぞれの呼び出しが個別の更新として扱われ、そのたびにレンダリングがトリガーされます。

例

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

const handleClick = () => {
  setCount(count + 1);
  setCount(count + 1);
};

この例では、handleClick 関数内で setCount 関数を2回呼び出しています。そのため、ボタンクリック時に2回のレンダリングが発生します。

解決策

この問題を解決するには、以下の方法があります。

状態更新関数を1回だけ呼び出す

状態更新ロジックを1つの関数にまとめ、それを1回だけ呼び出すことで、レンダリングを1回に抑えることができます。

const handleClick = () => {
  setCount(count => count + 2);
};

useReducer Hook を使用する

複雑な状態更新ロジックを扱う場合は、useState Hook の代わりに useReducer Hook を使用することができます。useReducer Hook は、状態更新ロジックを reducer 関数として分離し、状態更新をより効率的に処理することができます。

状態更新をバッチ処理する

React.unstable_batchedUpdates API を使用して、複数の状態更新をまとめて処理することができます。

React.unstable_batchedUpdates(() => {
  setCount(count + 1);
  setCount(count + 1);
});

補足

上記の解決策は、状況によって使い分ける必要があります。
複雑な状態更新ロジックを扱う場合は、パフォーマンスを最適化するために、useReducer Hook の使用を検討することをおすすめします。
React.unstable_batchedUpdates API は、実験的な API であり、将来変更される可能性があります。

問題コード

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

const handleClick = () => {
  setCount(count + 1);
  setCount(count + 1);
};

return (
  <div>
    <p>カウント: {count}</p>
    <button onClick={handleClick}>カウントを増やす</button>
  </div>
);

解決策1: 状態更新関数を1回だけ呼び出す

const handleClick = () => {
  setCount(count => count + 2);
};

return (
  <div>
    <p>カウント: {count}</p>
    <button onClick={handleClick}>カウントを増やす</button>
  </div>
);

このコードでは、setCount 関数を1回だけ呼び出すことで、レンダリングを1回に抑えています。

解決策2: useReducer Hook を使用する

const reducer = (state, action) => {
  switch (action) {
    case 'increment':
      return state + 1;
    default:
      return state;
  }
};

const [count, dispatch] = useReducer(reducer, 0);

const handleClick = () => {
  dispatch('increment');
};

return (
  <div>
    <p>カウント: {count}</p>
    <button onClick={handleClick}>カウントを増やす</button>
  </div>
);

このコードでは、useReducer Hook を使用して、状態更新ロジックを reducer 関数として分離しています。

解決策3: 状態更新をバッチ処理する

const handleClick = () => {
  React.unstable_batchedUpdates(() => {
    setCount(count + 1);
    setCount(count + 1);
  });
};

return (
  <div>
    <p>カウント: {count}</p>
    <button onClick={handleClick}>カウントを増やす</button>
  </div>
);

useMemo Hook を使用して、状態更新関数から生成される値をキャッシュすることができます。

const handleClick = () => {
  const updatedCount = count + 1;
  setCount(updatedCount);
};

return (
  <div>
    <p>カウント: {count}</p>
    <button onClick={handleClick}>カウントを増やす</button>
  </div>
);

このコードでは、useMemo Hook を使用して、updatedCount 変数をキャッシュしています。

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

return (
  <div>
    <p>カウント: {count}</p>
    <button onClick={handleClick}>カウントを増やす</button>
  </div>
);

状態更新ロジックを別コンポーネントに抽出する

状態更新ロジックが複雑な場合は、別コンポーネントに抽出することで、コードを整理し、可読性を向上させることができます。

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

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={handleClick}>カウントを増やす</button>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Counter />
    </div>
  );
};