useEffect

useEffectをいつ使うべきかいまいち分かっていなかったので、公式documentを見ながらまとめる。

例:

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]);
}

1. セットアップコード

const connection = createConnection(serverUrl, roomId);
        connection.connect();

1. クリーンアップコード

connection.disconnect();

• フロー

1. コンポーネントがページにマウントされると、セットアップコードが実行されます

2. 依存値が変更された上で、コンポーネントが再レンダーされるたびに:

   1. まず古いpropsとstateでクリーンアップコードが実行される
   2. 次に新しいpropsとstateでセットアップコードが実行される

3. コンポーネントがページから削除されると最後にクリーンアップコードが実行される。

effectを使って同期する

コンポーネント内の2種類のロジック

• レンダーコード
• イベントハンドラ
  • onClickとかの特定のユーザーアクションによって引き起こされてプログラムの状態を変化する
    これだけではない。
• エフェクト
  • 特定のイベントによってではなく、レンダー自体によって引き起こされる副作用を指定する。

e.g.)
チャットでのメッセージ送信→ユーザーが特定のボタンをクリックすることによって、直接引き起こされるためイベント
サーバ接続のセットアップ→コンポーネントが表示される原因となるインタラクションに関係なく行われるべきなのでエフェクト

そのエフェクトは不要かも

あるコードがエフェクトにあるべきか、イベントハンドラにあるべきかわからない場合は、そのコードが実行される理由を自問してください。コンポーネントがユーザに表示されたために実行されるべきコードにのみエフェクトを使用してください。