useEffect

useEffect(setup, dependencies?)

• リファレンス
  • useEffect(setup, dependencies?)
• 使用法
  • 外部システムへ�?接続
  • カスタムフックにエフェクトをラップする
  • 非 React ウィジェット�?制御
  • エフェクトを使ったデータフェッチ
  • リアクティブな依存配列�?指�?�
  • エフェクト内で以前�? state に基づいて state を更新する
  • オブジェクト型�?不要な依存値を削除する
  • 関数型�?不要な依存値を削除する
  • エフェクトから最新�? props と state を読み取る
  • サーバとクライアントで異なるコンテンツを表示する
• トラブルシューティング
  • コンポーネント�?マウント時にエフェクトが 2 回�?�行される
  • エフェクトが再レンダーごとに�?�行される
  • エフェクトが無限ループで再�?�行され続ける
  • コンポーネントがアンマウントされていない�?にクリーンアップロジックが�?�行される
  • エフェクトが表示に関することを行っており、�?�行前にちらつきが見られる

リファレンス

useEffect(setup, dependencies?)

コンポーネント�?トップレベルで useEffect を呼び出して、エフェクト (Effect) を�?�言します。

import { useEffect } from 'react';
import { createConnection } from './chat.js';

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);
  // ...
}

さらに例を見る

引数

• setup: エフェクト�?ロジックが記述された関数です。こ�?セットアップ関数は、オプションでクリーンアップ関数を返すことができます。コンポーネントが初めて DOM に追加されると、React はセットアップ関数を�?�行します。依存配列 (dependencies) が変更された再レンダー時には、React はまず古い値を使ってクリーンアップ関数（あれば）を�?�行し、次に新しい値を使ってセットアップ関数を�?�行します。コンポーネントが DOM から削除された後、React はクリーンアップ関数を最後にもう一度�?�行します。

• 省略可能 dependencies: setup コード内で参照されるすべて�?リアクティブな値�?リストです。リアクティブな値には、props、state、コンポーネント本体に直接�?�言されたすべて�?変数および関数が含まれます。リンタが React 用に設�?�されている場合、すべて�?リアクティブな値が依存値として正しく指�?�されているか確認できます。依存値�?リストは要素数が一�?�である必要があり、[dep1, dep2, dep3] �?ようにインラインで記述する必要があります。React は、Object.is を使った比較で、それぞれ�?依存値を以前�?値と比較します。こ�?引数を省略すると、エフェクトはコンポーネント�?毎回�?レンダー後に再�?�行されます。依存値�?配列を渡す場合と空�?配列を渡す場合、および何も渡さない場合�?違いを確認してください。

返り値

useEffect は undefined を返します。

注意点

• useEffect はフックであるため、コンポーネント�?トップレベルやカスタムフック内で�?み呼び出すことができます。ループや条件文�?中で呼び出すことはできません。これが必要な場合は、新しいコンポーネントを抽出し、そ�?中に state を移動させてください。

• 外部システムと同期する必要がない場合、エフェクトはおそらく不要です。

• Strict Mode が有効な場合、React は本物�?セットアップ�?前に、開発時専用�?セットアップ+クリーンアップサイクルを 1 回追加で�?�行します。これは、クリーンアップロジックがセットアップロジックと鏡�?ように対応しており、セットアップで行われたことを停止または元に戻していることを保証するため�?ストレステストです。問題が発生した場合は、クリーンアップ関数を�?�装します。

• 依存配列�?一部にコンポーネント内で�?�義されたオブジェクトや関数がある場合、エフェクトが必要以上に再�?�行される可能性があります。これを�?正するには、オブジェクト型および関数型�?不要な依存値を削除します。また、エフェクト�?外部に state �?更新や非リアクティブなロジックを抽出することもできます。

• エフェクトがユーザ操作（クリックなど）によって引き起こされたも�?でない場合、React は通常、ブラウザが新しい画面を描画した後にエフェクトを�?�行します。あなた�?エフェクトが（ツールチップ�?配�?など）何か視覚的な作業を行っており遅延が�?立つ場合（ちらつくなど）、useEffect を useLayoutEffect に�?き換えてください。

• エフェクトがユーザ操作（クリックなど）によって引き起こされた場合でも、ブラウザはエフェクト内�? state 更新処理�?前に画面を再描画する可能性があります。通常、これが望ましい動作です。しかし、ブラウザによる画面�?再描画をブロックしなければならない場合、useEffect を useLayoutEffect に�?き換える必要があります。

• エフェクトはクライアント上で�?み�?�行されます。サーバレンダリング中には�?�行されません。

使用法

外部システムへ�?接続

コンポーネントによっては自身がページに表示されている間、ネットワーク、何らか�?ブラウザ API、またはサードパーティライブラリと�?接続を維持する必要があるも�?があります。これら�?システムは React によって制御されていないため、外部 (external) �?も�?です。

コンポーネントを外部システムに接続するには、コンポーネント�?トップレベルで useEffect を呼び出します。

import { useEffect } from 'react';
import { createConnection } from './chat.js';

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useEffect(() => {
  	const connection = createConnection(serverUrl, roomId);
    connection.connect();
  	return () => {
      connection.disconnect();
  	};
  }, [serverUrl, roomId]);
  // ...
}

useEffect には 2 つ�?引数を渡す必要があります。

1. システムに接続するセットアップコードを含むセットアップ関数。
   • そ�?システムから切断するクリーンアップコードを含むクリーンアップ関数を返す必要があります。
2. これら�?関数内で使用されるコンポーネントから�?すべて�?値を含んだ依存値�?リスト。

React は必要に応じてセットアップ関数とクリーンアップ関数を呼び出し、これは複数回行われることがあります。

1. コンポーネントがページに追加（マウント）されると、セットアップコードが�?�行されます。
2. 依存値が変更された上でコンポーネントが再レンダーされる度に：
   • まず、古い props と state でクリーンアップコードが�?�行されます。
   • 次に、新しい props と state でセットアップコードが�?�行されます。
3. コンポーネントがページから削除（アンマウント）されると、最後にクリーンアップコードが�?�行されます。

上記�?例でこ�?シーケンスを説明しましょう。

上記�? ChatRoom コンポーネントがページに追加されると、serverUrl と roomId �?初期値を使ってチャットルームに接続します。serverUrl または roomId が再レンダー�?結果として変更される場合（例えば、ユーザがドロップダウンで別�?チャットルームを選択した場合）、あなた�?エフェクトは以前�?ルームから切断し、次�?ルームに接続します。ChatRoom コンポーネントがページから削除されると、あなた�?エフェクトは最後�?切断を行います。

バグを見つけ出すために、開発中には React はセットアップとクリーンアップを、セットアップ�?前に 1 回余分に�?�行します。これは、エフェクト�?ロジックが正しく�?�装されていることを確認するストレステストです。これが�?に見える問題を引き起こす場合、クリーンアップ関数に一部�?ロジックが欠けています。クリーンアップ関数は、セットアップ関数が行っていたことを停止ないし元に戻す必要があります。基本ルールとして、ユーザはセットアップが一度しか呼ばれていない（本番環境�?場合）か、セットアップ → クリーンアップ → セットアップ�?シーケンス（開発環境�?場合）で呼ばれているかを区別できないようにする必要があります。一般的な解決法を参照してください。

各エフェクトを独立したプロセスとして記述するようにし、一回�?セットアップ／クリーンアップ�?サイクルだけを考えるようにしてください。コンポーネントが現在マウント、更新、アンマウント�?どれを行っているかを考�?すべきではありません。セットアップロジックが正しくクリーンアップロジックと「対応」されることで、エフェクトはセットアップとクリーンアップを必要に応じて何度�?�行しても問題が起きない、堅牢なも�?となります。

カスタムフックにエフェクトをラップする

エフェクトは「避難ハッチ」です。React �?外に出る必要があり、かつ特�?��?ユースケースに対してより良い組み込み�?ソリューションがない場合に使用します。エフェクトを手で何度も書く必要があることに気付いたら、通常それは、あなた�?コンポーネントが依存する共通�?振る舞い�?ため�?カスタムフックを抽出する必要があるというサインです。

例えば、こ�? useChatRoom カスタムフックは、エフェクト�?ロジックをより�?�言的な API �?背後に「隠蔽」します。

function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}

こ�?後で、任意�?コンポーネントから以下�?ように使うことができます。

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });
  // ...

ほかにも React �?エコシステムには、さまざまな�?的�?ため�?優れたカスタムフックが多数公開されています。

カスタムフックでエフェクトをラップする方法についてもっと学ぶ

非 React ウィジェット�?制御

外部システムをあなた�?コンポーネント�? props や state に同期させたいことがあります。

例えば、React を使っていないサードパーティ製�?マップウィジェットやビデオプレーヤコンポーネントがある場合、エフェクトを使ってそちら�?メソッドを呼び出し、そちら�?状態を React コンポーネント�?現在 state に合わせることができます。以下では、map-widget.js に�?�義された MapWidget クラス�?インスタンスをエフェクトが作成します。Map コンポーネント�? props である zoomLevel が変更されると、エフェクトがクラスインスタンス�? setZoom() を呼び出して、同期を保ちます。

こ�?例では、クリーンアップ関数は必要ありません。なぜなら、MapWidget クラスは自身に渡された DOM ノード�?みを�?�理しているためです。React �? Map コンポーネントがツリーから削除された後、DOM ノードと MapWidget クラスインスタンスは、ブラウザ�? JavaScript エンジンによって自動的にガベージコレクションされます。

エフェクトを使ったデータフェッチ

エフェクトを使って、コンポーネントに必要なデータをフェッチ（fetch, 取得）することができます。ただしフレームワークを使用している場合は、エフェクトを自力で記述するよりも、フレームワーク�?データフェッチメカニズムを使用する方がはるかに効率的であることに注意してください。

エフェクトを使って自力でデータをフェッチしたい場合は、以下�?ようなコードを書くことになります。

import { useState, useEffect } from 'react';
import { fetchBio } from './api.js';

export default function Page() {
  const [person, setPerson] = useState('Alice');
  const [bio, setBio] = useState(null);

  useEffect(() => {
    let ignore = false;
    setBio(null);
    fetchBio(person).then(result => {
      if (!ignore) {
        setBio(result);
      }
    });
    return () => {
      ignore = true;
    };
  }, [person]);

  // ...

ignore 変数に注�?してください。これは false で初期化され、クリーンアップ時に true に設�?�されます。これにより、コードが “競合状態 (race condition)” に悩まされないようになります。ネットワークレスポンスは、送信した順序と異なる順序で届くことがあることに注意しましょう。

また、async / await 構文を使って書き直すこともできますが、こ�?場合でもクリーンアップ関数を渡す必要があります。

エフェクト内で直接データフェッチを書くとコード�?繰り返しが増え、キャッシュやサーバレンダリングといった最適化を後から追加することが難しくなります。独自�?、あるいはコミュニティがメンテナンスしているカスタムフックを使う方が簡単です。

リアクティブな依存配列�?指�?�

エフェクト�?依存配列は、自分で「選ぶ」たぐい�?物ではないことに注意してください。エフェクト�?コードによって使用されるすべて�?リアクティブな値は、依存値として�?�言されなければなりません。エフェクト�?依存値�?リストは、周囲�?コードによって決�?�されます。

function ChatRoom({ roomId }) { // This is a reactive value
  const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // This is a reactive value too

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId); // This Effect reads these reactive values
    connection.connect();
    return () => connection.disconnect();
  }, [serverUrl, roomId]); // ✅ So you must specify them as dependencies of your Effect
  // ...
}

serverUrl または roomId が変更されると、エフェクトは新しい値を使用してチャットに再接続します。

リアクティブな値には、props と、コンポーネント内に直接�?�言されたすべて�?変数および関数が含まれます。roomId と serverUrl はリアクティブな値であるため、依存値�?リストから削除することはできません。それらを省略しようとした場合、React 用�?リンタが正しく設�?�されていれば、リンタはこれを�?正が必要な誤りであると指摘します。

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
  
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => connection.disconnect();
  }, []); // 🔴 React Hook useEffect has missing dependencies: 'roomId' and 'serverUrl'
  // ...
}

依存配列から何かを削除するには、リンタに対し、それが依存値である理由がないことを「証明」する必要があります。例えば、serverUrl をコンポーネント�?外に移動すれば、それがリアクティブな値ではなく、再レンダー時に変更されないも�?であることを証明できます。

const serverUrl = 'https://localhost:1234'; // Not a reactive value anymore

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]); // ✅ All dependencies declared
  // ...
}

これで serverUrl がリアクティブな値でなくなった（再レンダー時に変更されない）ため、依存配列に入れる必要がなくなりました。エフェクト�?コードがリアクティブな値を使用していない場合、そ�?依存配列は空 ([]) であるべきです。

const serverUrl = 'https://localhost:1234'; // Not a reactive value anymore
const roomId = 'music'; // Not a reactive value anymore

function ChatRoom() {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => connection.disconnect();
  }, []); // ✅ All dependencies declared
  // ...
}

空�?依存配列で�?�義したエフェクトは、コンポーネント�? props や state が変更された場合でも再�?�行されません。

useEffect(() => {
  // ...
  // 🔴 Avoid suppressing the linter like this:
  // eslint-ignore-next-line react-hooks/exhaustive-deps
}, []);

エフェクト内で以前�? state に基づいて state を更新する

エフェクトから以前�? state に基づいて state を更新したい場合、問題が発生するかもしれません。

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(count + 1); // You want to increment the counter every second...
    }, 1000)
    return () => clearInterval(intervalId);
  }, [count]); // 🚩 ... but specifying `count` as a dependency always resets the interval.
  // ...
}

count はリアクティブな値な�?で、依存配列に指�?�する必要があります。ただし、こ�?ままでは count が変更されるたびに、エフェクトがクリーンアップとセットアップを繰り返すことになります。これは望ましくありません。

こ�?問題を解決するには、setCount に c => c + 1 という state 更新用関数を渡します。

c => c + 1 を count + 1 �?代わりに渡すようになった�?で、こ�?エフェクトはもう count に依存する必要はありません。こ�?�?正�?結果、count が変化するたびにインターバル�?クリーンアップとセットアップを行わなくてもよくなります。

オブジェクト型�?不要な依存値を削除する

エフェクトがレンダー中に作成されたオブジェクトや関数に依存している場合、必要以上にエフェクトが�?�行されてしまうことがあります。たとえば、こ�?エフェクトは options オブジェクトがレンダーごとに異なるため、毎回�?レンダー後に再接続を行ってしまいます：

const serverUrl = 'https://localhost:1234';

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');

  const options = { // 🚩 This object is created from scratch on every re-render
    serverUrl: serverUrl,
    roomId: roomId
  };

  useEffect(() => {
    const connection = createConnection(options); // It's used inside the Effect
    connection.connect();
    return () => connection.disconnect();
  }, [options]); // 🚩 As a result, these dependencies are always different on a re-render
  // ...

レンダー中に新たに作成されたオブジェクトを依存値として使用しないでください。代わりに、エフェクト�?中でオブジェクトを作成します：

エフェクト�?中で options オブジェクトを作成するようになった�?で、エフェクト自体は roomId 文字列にしか依存しません。

こ�?�?正により、入力フィールドに文字を入力してもチャットが再接続されることはなくなります。オブジェクトは再レンダー�?たびに再作成される�?とは異なり、roomId �?ような文字列は別�?値に設�?�しない限り変更されません。依存値�?削除に関する詳細を読む。

関数型�?不要な依存値を削除する

エフェクトがレンダー中に作成されたオブジェクトや関数に依存している場合、必要以上にエフェクトが�?�行されてしまうことがあります。たとえば、こ�?エフェクトは createOptions 関数がレンダーごとに異なるため、毎回再接続を行ってしまいます：

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');

  function createOptions() { // 🚩 This function is created from scratch on every re-render
    return {
      serverUrl: serverUrl,
      roomId: roomId
    };
  }

  useEffect(() => {
    const options = createOptions(); // It's used inside the Effect
    const connection = createConnection();
    connection.connect();
    return () => connection.disconnect();
  }, [createOptions]); // 🚩 As a result, these dependencies are always different on a re-render
  // ...

再レンダー�?たびに新しい関数を作成すること、それ自体には問題はなく、最適化しようとする必要はありません。ただし、エフェクト�?依存値としてそれを使用する場合、毎回�?レンダー後にエフェクトが再�?�行されてしまうことになります。

レンダー中に作成された関数を依存値として使用することは避けてください。代わりに、エフェクト�?内部で�?�言するようにします。

createOptions 関数をエフェクト内で�?�義するようにした�?で、エフェクト自体は roomId 文字列に�?み依存することになります。こ�?�?正により、入力欄に入力してもチャットが再接続されなくなります。再レンダー時に再作成される関数とは異なり、roomId �?ような文字列は他�?値に設�?�しない限り変更されません。依存値�?削除について詳しくはこちら。

エフェクトから最新�? props と state を読み取る

デフォルトでは、エフェクトからリアクティブな値を読み取るときは、それを依存値として追加する必要があります。これにより、エフェクトはそ�?値�?変更に対して「反応」することが保証されます。ほとんど�?依存値については、それが望む挙動です。

ただし、時には「反応」をせずに最新�? props や state を エフェクト内から読み取りたいことがあるでしょう。例えば、ショッピングカート内�?アイテム数をページ訪問ごとに記録する場合を想像してみてください。

function Page({ url, shoppingCart }) {
  useEffect(() => {
    logVisit(url, shoppingCart.length);
  }, [url, shoppingCart]); // ✅ All dependencies declared
  // ...
}

url �?変更ごとに新しいページ訪問を記録したいが、shoppingCart �?変更�?みでは記録したくない場合はどうすればいい�?でしょうか？ リアクティブルールに反することなく shoppingCart を依存配列から除外することはできません。しかし、エフェクト内から呼ばれるコード�?一部であるにもかかわらず、そ�?コードが変更に「反応」しないことを示すことができます。useEffectEvent フックを使用して、エフェクトイベント (effect event) を�?�言し、shoppingCart を読み取るコードをそ�?内部に移動してください。

function Page({ url, shoppingCart }) {
  const onVisit = useEffectEvent(visitedUrl => {
    logVisit(visitedUrl, shoppingCart.length)
  });

  useEffect(() => {
    onVisit(url);
  }, [url]); // ✅ All dependencies declared
  // ...
}

エフェクトイベントはリアクティブでなはいため、あなた�?エフェクト�?依存配列からは常に除く必要があります。これにより、非リアクティブなコード（最新�? props や state �?値を読むことができるコード）をエフェクトイベント内に入れることができます。onVisit �?中で shoppingCart を読むことで、shoppingCart がエフェクトを再�?�行することがなくなります。

エフェクトイベントがリアクティブなコードと非リアクティブなコードをど�?ように分離するか詳しく読む。

サーバとクライアントで異なるコンテンツを表示する

お使い�?アプリがサーバレンダリングを（直接ないしフレームワーク経由で）使用している場合、コンポーネントは 2 �?類�?環境でレンダーされます。サーバ上では、初期 HTML を生成するためにレンダーされます。クライアント上では、React がそ�? HTML にイベントハンドラをアタッチするために再度レンダーコードを�?�行します。これが、ハイドレーションが動作するためには初回レンダー�?出力がクライアントとサーバ�?両方で同一でなければならない理由です。

まれに、クライアント側で異なるコンテンツを表示する必要がある場合があります。たとえば、アプリが localStorage からデータを読み込む場合、サーバ上ではそれを行うことができません。これは以下�?方法で�?�装できます。

function MyComponent() {
  const [didMount, setDidMount] = useState(false);

  useEffect(() => {
    setDidMount(true);
  }, []);

  if (didMount) {
    // ... return client-only JSX ...
  }  else {
    // ... return initial JSX ...
  }
}

アプリがロードされている間、ユーザは初期レンダー�?出力を表示します。ロードとハイドレーションが�?�了したら、エフェクトが�?�行され、didMount が true にセットされ、再レンダーがトリガされます。これにより、クライアント専用�?レンダー出力に切り替わります。エフェクトはサーバ上では�?�行されないため、初回サーバレンダー時には didMount は false �?ままになります。

こ�?パターンは節度を持って使用してください。遅い接続�?ユーザは初期コンテンツをかなり長い時間、場合によっては数秒以上表示することになります。な�?でコンポーネント�?見た�?に違和感を与える変更をしないようにしてください。多く�?場合、CSS で条件付きに異なるも�?を表示することで、こ�?ようなことはしなくてよくなります。

トラブルシューティング

コンポーネント�?マウント時にエフェクトが 2 回�?�行される

Strict Mode がオン�?場合、開発時に React は�?�際�?セットアップ�?前に、セットアップとクリーンアップをもう一度�?�行します。

これは、エフェクト�?ロジックが正しく�?�装されていることを確認するため�?ストレステストです。これが�?に見える問題を引き起こす場合、クリーンアップ関数に一部�?ロジックが欠けています。クリーンアップ関数は、セットアップ関数が行っていたことを停止ないし元に戻す必要があります。基本原則は、ユーザがセットアップが一度呼ばれた場合（本番環境�?場合）と、セットアップ → クリーンアップ → セットアップというシーケンスで呼ばれた場合（開発環境�?場合）で、違いを見分けられてはいけない、ということです。

ど�?ようにバグを見つける�?に役立つか と、ロジックを�?正する方法 について詳しく読む。

エフェクトが再レンダーごとに�?�行される

まず、依存配列�?指�?�を忘れていないか確認してください。

useEffect(() => {
  // ...
}); // 🚩 No dependency array: re-runs after every render!

依存配列を指�?�しているにもかかわらず、エフェクトがループで再�?�行される場合、それは再レンダーごとに依存する値�?どれかが変わっているためです。

こ�?問題は、手動で依存する値をコンソールにログ出力することでデバッグできます。

  useEffect(() => {
    // ..
  }, [serverUrl, roomId]);

  console.log([serverUrl, roomId]);

次に、コンソール上�?異なる再レンダーから表示された配列を右クリックし、それぞれで “Store as a global variable” を選択します。最初�?も�?が temp1 として保存され、2 番�?�?も�?が temp2 として保存されたとすると、以下�?ようにブラウザ�?コンソールを使って、両方�?配列でそれぞれ�?値が同じかどうかを確認できます。

Object.is(temp1[0], temp2[0]); // Is the first dependency the same between the arrays?
Object.is(temp1[1], temp2[1]); // Is the second dependency the same between the arrays?
Object.is(temp1[2], temp2[2]); // ... and so on for every dependency ...

再レンダーごとに値�?変わる依存値が見つかった場合、通常は次�?方法�?いずれかで�?正できます。

• エフェクトから�?前回�? state に基づく state �?更新
• オブジェクト型�?不要な依存値を削除する
• 関数型�?不要な依存値を削除する
• エフェクトから最新�? props と state を読み取る

最後�?手�?�として、上記�?方法がうまくいかなかった場合、そ�?値を作っているところを useMemo または（関数�?場合）useCallback でラップしてください。

エフェクトが無限ループで再�?�行され続ける

エフェクトが無限ループで�?�行される場合、以下�? 2 つ�?条件が成立しているはずです。

• エフェクトが何らか�? state を更新している。
• そ�? state 更新により再レンダーが発生し、それによりエフェクト�?依存配列が変更されている。

問題を�?正する前に、エフェクトが外部システム（DOM、ネットワーク、サードパーティ�?ウィジェットなど）に接続しているかどうかを確認してください。エフェクトが state を設�?�する必要がある理由は何ですか？ 外部システムと同期するためですか？ それとも、アプリケーション�?データフローをそれで�?�理しようとしている�?でしょうか？

外部システムがない場合、そもそもエフェクトを削除することでロジックが簡略化されるかどうか、検討してください。

もし本当に外部システムと同期している場合は、エフェクトがいつ、ど�?ような条件下で state を更新する必要があるか考えてみてください。何か、コンポーネント�?視覚的な出力に影響を与える変更がある�?でしょうか？ レンダーに使用されないデータを�?�理する必要がある場合は、ref（再レンダーをトリガしない）�?方が適切かもしれません。エフェクトが必要以上に state を更新（して再レンダーをトリガ）していないことを確認してください。

最後に、エフェクトが適切なタイミングで state を更新しているも�?�?、それでも無限ループが�?�っている場合は、そ�? state �?更新によりエフェクト�?依存配列�?どれかが変更されているためです。依存配列�?変更をデバッグする方法を確認してください。

コンポーネントがアンマウントされていない�?にクリーンアップロジックが�?�行される

クリーンアップ関数は、アンマウント時だけでなく、依存配列が変更された後�?再レンダー後にも�?�行されます。また、開発中には、React がコンポーネント�?マウント直後に、セットアップ+クリーンアップを 1 回追加で�?�行します。

対応するセットアップコード�?ないクリーンアップコードをお持ち�?場合、通常はコード�?問題があります。

useEffect(() => {
  // 🔴 Avoid: Cleanup logic without corresponding setup logic
  return () => {
    doSomething();
  };
}, []);

クリーンアップロジックはセットアップロジックと「対称的」であり、セットアップが行ったことを停止ないし元に戻す必要があります。

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [serverUrl, roomId]);

エフェクト�?ライフサイクルがコンポーネント�?ライフサイクルとど�?ように異なるかを学びましょう。

エフェクトが表示に関することを行っており、�?�行前にちらつきが見られる

エフェクトがブラウザ�?画面描画をブロックする必要がある場合は、useEffect �?代わりに useLayoutEffect を使用してください。ただし、これはほとんど�?エフェクトには必要ないということに注意してください。これは、ブラウザ描画�?前にエフェクトを�?�行することが重要な場合に�?み必要です。例えば、ユーザがツールチップを見る前に、ツールチップ�?サイズを測�?�して配�?するために使用します。