リアクティブエフェクトのライフサイクル

エフェクトのライフサイクル

すべてのReactコンポーネントは同じライフサイクルを経ます

• コンポーネントは、画面に追加されるとマウントされます。
• コンポーネントは、通常はインタラクションに応答して、新しいプロップまたは状態を受け取ると更新されます。
• コンポーネントは、画面から削除されるとアンマウントされます。

これはコンポーネントを考える良い方法ですが、エフェクトについてはそうではありません。 代わりに、コンポーネントのライフサイクルとは無関係に、個々のエフェクトを独立して考えてみてください。エフェクトは、外部システムを現在のプロップと状態に同期する方法 を記述します。コードが変更されると、同期はより頻繁に、またはあまり頻繁に行われる必要があります。

この点を説明するために、コンポーネントをチャットサーバーに接続するこのエフェクトを考えてみましょう。

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

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

エフェクトの本体は、同期を開始する方法 を指定します。

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

エフェクトによって返されるクリーンアップ関数は、同期を停止する方法 を指定します。

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

直感的には、Reactはコンポーネントがマウントされると同期を開始し、コンポーネントがアンマウントされると同期を停止する と考えるかもしれません。しかし、これは物語の終わりではありません！場合によっては、コンポーネントがマウントされたままである間にも、複数回同期を開始および停止する 必要が生じる可能性があります。

これがなぜ必要なのか、いつ発生するのか、そしてどのようにこの動作を制御できるのかを見てみましょう。

同期が複数回必要になる理由

ChatRoomコンポーネントが、ユーザーがドロップダウンで選択するroomIdプロップを受け取るとします。最初に、ユーザーがroomIdとして"general"ルームを選択します。アプリは"general"チャットルームを表示します。

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

function ChatRoom({ roomId /* "general" */ }) {
  // ...
  return <h1>Welcome to the {roomId} room!</h1>;
}

UIが表示された後、Reactは同期を開始するためにエフェクトを実行します。"general"ルームに接続します。

function ChatRoom({ roomId /* "general" */ }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId); // Connects to the "general" room
    connection.connect();
    return () => {
      connection.disconnect(); // Disconnects from the "general" room
    };
  }, [roomId]);
  // ...

今のところ順調です。

その後、ユーザーはドロップダウンで別のルーム（たとえば、"travel"）を選択します。まず、ReactはUIを更新します。

function ChatRoom({ roomId /* "travel" */ }) {
  // ...
  return <h1>Welcome to the {roomId} room!</h1>;
}

次に何が起こるべきかを考えてみましょう。ユーザーはUIで"travel"が選択されたチャットルームであることを確認します。しかし、前回実行されたEffectはまだ"general"ルームに接続されたままです。roomIdプロップが変更されたため、以前に行ったEffectの処理（"general"ルームへの接続）はもはやUIと一致しません。

この時点で、Reactには2つのことを行ってもらいたいと考えています。

1. 古いroomIdとの同期を停止する（"general"ルームから切断する）。
2. 新しいroomIdとの同期を開始する（"travel"ルームに接続する）。

幸いなことに、すでにReactにこれらの両方の方法を教えました！ Effectの本体は同期を開始する方法を指定し、クリーンアップ関数は同期を停止する方法を指定します。Reactが行う必要があるのは、それらを正しい順序で、正しいプロップと状態を使用して呼び出すだけです。それがどのように行われるかを見てみましょう。

ReactによるEffectの再同期方法

ご承知のとおり、ChatRoomコンポーネントは、roomIdプロップに新しい値を受け取りました。以前は"general"でしたが、現在は"travel"です。Reactは、異なるルームに再接続するために、Effectを再同期する必要があります。

同期を停止するために、Reactは"general"ルームに接続した後にEffectが返したクリーンアップ関数を呼び出します。roomIdが"general"だったため、クリーンアップ関数は"general"ルームから切断します。

function ChatRoom({ roomId /* "general" */ }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId); // Connects to the "general" room
    connection.connect();
    return () => {
      connection.disconnect(); // Disconnects from the "general" room
    };
    // ...

次に、Reactはこのレンダリング中に提供したEffectを実行します。今回はroomIdが"travel"であるため、同期を開始して"travel"チャットルームに接続します（そのクリーンアップ関数が最終的に呼び出されるまで）。

function ChatRoom({ roomId /* "travel" */ }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId); // Connects to the "travel" room
    connection.connect();
    // ...

これのおかげで、ユーザーがUIで選択したのと同じルームに接続できるようになりました。危機回避です！

異なるroomIdでコンポーネントが再レンダリングされるたびに、Effectは再同期されます。たとえば、ユーザーがroomIdを"travel"から"music"に変更したとします。Reactは再び、そのクリーンアップ関数を呼び出すことによって（"travel"ルームから切断することによって）、Effectの同期を停止します。次に、新しいroomIdプロップを使用して本体を実行することによって（"music"ルームに接続することによって）、同期を再開します。

最後に、ユーザーが別の画面に移動すると、ChatRoomはアンマウントされます。これで、接続を維持する必要はまったくなくなります。ReactはEffectの同期を最後に停止し、"music"チャットルームから切断します。

Effectの観点からの考察

ChatRoomコンポーネントの観点から起こったすべてを要約しましょう。

1. roomIdが"general"に設定された状態でChatRoomがマウントされました。
2. roomIdが"travel"に設定された状態でChatRoomが更新されました。
3. roomIdが"music"に設定された状態でChatRoomが更新されました。
4. ChatRoomがアンマウントされました。

コンポーネントのライフサイクルのこれらの各時点で、Effectは異なる動作をしました。

1. Effectは"general"ルームに接続しました。
2. Effectは"general"ルームから切断し、"travel"ルームに接続しました。
3. Effectは"travel"ルームから切断し、"music"ルームに接続しました。
4. Effectは"music"ルームから切断しました。

では、Effect自身の観点から何が起こったかを考えてみましょう。

  useEffect(() => {
    // Your Effect connected to the room specified with roomId...
    const connection = createConnection(serverUrl, roomId);
    connection.connect();
    return () => {
      // ...until it disconnected
      connection.disconnect();
    };
  }, [roomId]);

このコードの構造は、起こったことを重ならない時間の連続として見るきっかけになるかもしれません。

1. Effectは"general"ルームに接続しました（切断されるまで）。
2. Effectは"travel"ルームに接続しました（切断されるまで）。
3. Effectは"music"ルームに接続しました（切断されるまで）。

以前は、コンポーネントの観点から考えていました。コンポーネントの観点から見ると、Effectを「コールバック」や「ライフサイクルイベント」として考え、「レンダリング後」や「アンマウント前」など特定の時間に発生するものでした。この考え方はすぐに複雑になるので、避けるのが最善です。

代わりに、常に一度に1つの開始/停止サイクルに焦点を当てましょう。コンポーネントがマウント、更新、またはアンマウントされているかどうかは問題ではありません。必要なのは、同期を開始する方法と停止する方法を記述することだけです。うまく行けば、Effectは必要な回数だけ開始および停止されても堅牢になります。

これは、JSXを作成するレンダリングロジックを作成するときに、コンポーネントがマウントされているか更新されているかを考えないことを思い出させるかもしれません。画面に表示されるものを記述すると、Reactは残りを処理します。

ReactによるEffectの再同期能力の検証方法

実際に操作できるライブ例を以下に示します。「チャットを開く」を押すと、ChatRoomコンポーネントがマウントされます。

コンポーネントが初めてマウントされると、3つのログが表示されることに注意してください。

1. ✅ "general" ルームへの接続中 (https://localhost:1234…) (開発環境のみ)
2. ❌ "general" ルームから切断されました (https://localhost:1234) (開発環境のみ)
3. ✅ "general" ルームへの接続中 (https://localhost:1234…)

最初の2つのログは開発環境のみです。開発環境では、Reactは常に各コンポーネントを一度再マウントします。

Reactは、開発環境ではすぐに再同期を強制することで、Effectが再同期できることを検証します。これは、ドアのロックが機能するかを確認するために、ドアを開閉する動作に似ています。Reactは、実装されたクリーンアップが適切であることを確認するために、開発環境ではEffectを余分な回数開始および停止します。Effectが開発環境で2回実行される方法の対処法

実際には、Effectが再同期される主な理由は、Effectが使用するデータの一部が変更された場合です。上記のサンドボックスで、選択されたチャットルームを変更してみてください。roomIdが変更されると、Effectが再同期されることに注意してください。

しかし、再同期が必要となる、より特殊なケースもあります。たとえば、チャットが開いている間に、上記のサンドボックスでserverUrlを編集してみてください。Effectがコードの編集に応じて再同期されることに注意してください。将来、Reactは再同期に依存する機能をさらに追加する可能性があります。

ReactがEffectの再同期が必要であると認識する方法

roomIdの変更後に、ReactがEffectの再同期が必要であるとどのように認識したのか疑問に思われるかもしれません。それは、そのコードがroomIdに依存していることをReactに伝えたからです。依存関係のリストに含めることで。

function ChatRoom({ roomId }) { // The roomId prop may change over time
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId); // This Effect reads roomId 
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [roomId]); // So you tell React that this Effect "depends on" roomId
  // ...

これがその仕組みです。

1. roomIdはpropであり、時間とともに変化する可能性があることを知っていました。
2. EffectがroomIdを読み取るため（したがって、そのロジックは後で変わる可能性のある値に依存している）、知っていました。
3. そのため、Effectの依存関係として指定しました（roomIdが変更されたときに再同期されるように）。

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

function ChatRoom({ roomId }) {
  useEffect(() => {
    logVisit(roomId);
  }, [roomId]);

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

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

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

function ChatRoom({ roomId }) { // Props change over time
  const [serverUrl, setServerUrl] = useState('https://localhost:1234'); // State may change over time

  useEffect(() => {
    const connection = createConnection(serverUrl, roomId); // Your Effect reads props and state
    connection.connect();
    return () => {
      connection.disconnect();
    };
  }, [roomId, serverUrl]); // So you tell React that this Effect "depends on" on props and state
  // ...
}