パフォーマンス向上！React onClickのレンダリング時実行を抑制する方法

2024-04-02

ReactのonClick関数：レンダリング時に実行される仕組みと注意点

概要

原因

onClick関数がレンダリング時に実行されるのは、以下の2つの理由が考えられます。

親コンポーネントの状態更新による再レンダリング: 親コンポーネントの状態が更新されると、子コンポーネントも再レンダリングされます。この再レンダリングによって、子コンポーネントのonClick関数も実行されます。
useEffect Hookの使用: useEffect Hookを使用して、コンポーネントのレンダリング時に実行したい処理を記述することができます。この処理の中にonClick関数を記述すると、レンダリング時に実行されます。

影響

不要な処理が実行される
予期せぬ状態変更が発生する
パフォーマンスの低下

対策

useMemo Hookの使用: useMemo Hookを使用して、onClick関数に渡す値をメモ化することができます。これにより、レンダリング時に値が再計算されるのを防ぎ、onClick関数の不要な実行を防ぐことができます。
useEffect Hookの適切な使用: useEffect Hookを使用する場合は、レンダリング時に実行する処理を慎重に検討する必要があります。onClick関数をレンダリング時に実行する必要がある場合は、useEffect Hookの第二引数に空の配列を渡すことで、レンダリング時のみ実行することができます。

コード例

以下のコード例は、useMemo Hookを使用して、onClick関数がレンダリング時に実行されるのを防ぐ方法を示しています。

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

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

  const memoizedOnClick = useMemo(() => handleClick, []);

  return (
    <div>
      <button onClick={memoizedOnClick}>ボタン</button>
    </div>
  );
};

このコード例では、useMemo Hookを使用して、handleClick関数をメモ化しています。これにより、countの値が変更されても、onClick関数はレンダリング時に実行されません。

onClick関数は、レンダリング時に実行される可能性があることを理解し、適切な対策を講じることで、意図しない挙動を防ぎ、パフォーマンスを向上させることができます。

問題のあるコード:

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

  const handleClick = () => {
    console.log(`クリックされました: count=${count}`);
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={handleClick}>ボタン</button>
    </div>
  );
};

このコードでは、countの値が変更されるたびに、onClick関数が実行されます。これは、ボタンをクリックしていない場合でも、コンポーネントがレンダリングされるたびに発生します。

useMemo Hookを使用した解決策:

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

  const handleClick = () => {
    console.log(`クリックされました: count=${count}`);
    setCount(count + 1);
  };

  const memoizedOnClick = useMemo(() => handleClick, []);

  return (
    <div>
      <button onClick={memoizedOnClick}>ボタン</button>
    </div>
  );
};

実行結果:

ボタンをクリックした時のみ、`onClick`関数が実行されます。

解説:

useMemo Hookは、最初の引数として渡された関数をメモ化します。
メモ化された関数は、レンダリング時にのみ実行されます。
第二引数に空の配列を渡すことで、依存関係がないことを示します。

useMemo Hookを使用して、onClick関数がレンダリング時に実行されるのを防ぐことができます。これは、パフォーマンスを向上させ、意図しない挙動を防ぐのに役立ちます。

onClick関数がレンダリング時に実行されるのを防ぐ他の方法

アロー関数を使用する

以下のコードのように、onClickイベントハンドラにアロー関数を使用することができます。

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>ボタン</button>
    </div>
  );
};

アロー関数は、レンダリング時にのみ作成されます。そのため、countの値が変更されても、onClick関数はレンダリング時に実行されません。

refを使用する

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

  const handleClickRef = useRef(() => setCount(count + 1));

  useEffect(() => {
    handleClickRef.current = () => setCount(count + 1);
  }, [count]);

  return (
    <div>
      <button onClick={handleClickRef.current}>ボタン</button>
    </div>
  );
};