React useEffect の dependencies に気を付ける

環境

• React 19.1

---

dependencies が同じ useEffect を定義した場合、 dependencies が変更されたタイミングで、どちらも呼び出される。

import './App.css';

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

export default function App(): React.JSX.Element {

  const [clickCount, setClickCount] = useState<number>(0);
  const [text, setText] = useState('');

  const handleClick = (): void => {
    setClickCount(prev => prev + 1);
  };

  /** clickCount 変更時に実行する useEffect 1 */
  useEffect(() => {
    if (clickCount === 0) {
      return;
    }

    setText(prev => {
      return prev.concat(`Clicked ${clickCount} time(s). useEffect executed A.\n`);
    });
  }, [clickCount]);

  /** clickCount 変更時に実行する useEffect 2 */
  useEffect(() => {
    if (clickCount === 0) {
      return;
    }

    setText(prev => {
      return prev.concat(`Clicked ${clickCount} time(s). useEffect executed B.\n`);
    });
  }, [clickCount]);

  return (
    <>
      <div>
        <button onClick={handleClick}>click</button>
      </div>
      <textarea
        placeholder='sample'
        readOnly={true}
        value={text}
      />
    </>
  );

}

上記実装の場合、同じ dependencies を指定した2つの useEffect が実行される。

確認に使用したソースはこちら。