Reactコンポーネントのライフサイクル：マウント、更新、アンマウント

Reactコンポーネントのライフサイクルには3つのフェーズがあります。マウント（コンポーネントが初めて画面に現れる）、更新（state、props、コンテキストが変わったので再レンダリングされる）、アンマウント（取り除かれる）です。関数コンポーネントでは、これらのフェーズに useEffect で反応します。[] を持つエフェクトはマウントの後に、依存値を持つエフェクトはそれが変わった更新の後に実行され、エフェクトが返す関数はアンマウント時に実行されます。

プレビューの下のコンソールに、各フェーズが起きた瞬間に表示されます。

import { useEffect, useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    console.log('render, count =', count);

    useEffect(() => {
        console.log('mounted');
        return () => console.log('unmounted');
    }, []);

    useEffect(() => {
        if (count > 0) console.log('updated, count =', count);
    }, [count]);

    return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

export default function App() {
    const [show, setShow] = useState(true);

    return (
        <div>
            {show && <Counter />}
            <button onClick={() => setShow(!show)} style={{ marginInlineStart: 8 }}>
                {show ? 'Unmount' : 'Mount'} the counter
            </button>
        </div>
    );
}

コンソールは render, count = 0 と mounted で始まります。Countをクリックするたびに、レンダリングと更新が記録されます。Unmountで unmounted が記録され、もう一度Mountすると count = 0 からやり直しです。stateがコンポーネントと一緒に捨てられたからです。

マウント

コンポーネントは、Reactがツリーのある場所で初めてそれを描画するときにマウントされます。Reactは関数を呼び、返されたJSXからDOMノードを作って挿入し、ブラウザに描画させてから、コンポーネントのエフェクトを実行します。

useEffect(fn, []) は、コンポーネントが画面にある間ずっと存在すべきものを始める場所です。購読、タイマー、接続、最初のデータリクエストなどです。描画の後に実行されるので、最初のフレームを遅らせることはありません。

更新

コンポーネントは、次のときに更新（再レンダリング）されます。

• 自分のstateが変わったとき
• 親がもう一度レンダリングされたとき（デフォルトでは、propsが変わったかどうかにかかわらず、すべての子もレンダリングされます）
• 読んでいるコンテキストが変わったとき

各更新の後、Reactは依存値が変わったエフェクトを実行します。エフェクトを再実行する前に、そのエフェクトの前回のクリーンアップを実行するので、新しい購読が開く前に古い購読は閉じられます。何がレンダリングのきっかけになるかは、レンダリングのページで詳しく扱っています。

アンマウント

コンポーネントは、親がそれを描画しなくなったとき（上の {show && <Counter />} のように）、その key が変わったとき、またはルート自体がアンマウントされたときにアンマウントされます。ReactはそのDOMノードを取り除き、すべてのエフェクトのクリーンアップを実行し、そのstateを捨てます。後でコンポーネントがまた現れても、それはまったく新しいインスタンスです。

親と子

Reactは上から下へレンダリングしますが、エフェクトは下から上へ実行します。親と子が一緒にマウントされると、子のエフェクトが先に実行されるので、親のエフェクトは子が完全に準備できていることを前提にできます。

import { useEffect, useState } from 'react';

function Child() {
    console.log('render Child');
    useEffect(() => {
        console.log('Child effect');
        return () => console.log('Child cleanup');
    }, []);
    return <p>I am the child.</p>;
}

function Parent() {
    console.log('render Parent');
    useEffect(() => {
        console.log('Parent effect');
        return () => console.log('Parent cleanup');
    }, []);
    return <Child />;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Remove' : 'Add'} both</button>
            {show && <Parent />}
        </div>
    );
}

マウントでは render Parent、render Child、Child effect、Parent effect が記録されます。Removeを押すと、クリーンアップは逆の順番で実行されます。Parent cleanup、次に Child cleanup です。

レンダーフェーズとコミットフェーズ

各更新は2つのフェーズを経ます。

1. レンダーフェーズ。Reactはコンポーネントを呼んで新しいJSXを計算し、前回の結果と比べます。画面にはまだ何の変化もありません。Reactはこの作業を一時停止したり、StrictModeで2回実行したり、捨てたりすることがあります。だからこそレンダリングは純粋でなければなりません。リクエストも購読も、外の変数の変更も禁止です。
2. コミットフェーズ。Reactは差分をDOMに適用し、refを付け、useLayoutEffect のコールバックを実行します。すべてブラウザが描画する前です。useEffect のコールバックはその後、たいていはブラウザが描画してから実行されます。クリックなどの個別の入力が更新のきっかけなら、Reactは代わりにレイアウトエフェクトのすぐ後にそれらを実行し、次のイベントの前に結果を用意します。

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

export default function App() {
    const [count, setCount] = useState(0);
    console.log('1. render phase: computing JSX for', count);

    useLayoutEffect(() => {
        console.log('2. commit phase: layout effect, DOM updated, not painted yet');
    });

    useEffect(() => {
        console.log('3. effect: after the commit');
    });

    return <button onClick={() => setCount(count + 1)}>Render again ({count})</button>;
}

クリックするたびに、3行が同じ順番で記録されます。これらのエフェクトには依存配列がないので、レンダリングのたびに実行されます。両方の第2引数に [] を追加すると、最初のレンダリングの後にだけ実行されます。

クラスのライフサイクルメソッドとフックでの同等品

クラスコンポーネントは、ライフサイクルを名前の付いたメソッドとして書き出します。古いコードや、今もクラスが必要なエラーバウンダリで目にするでしょう。

次のクラスは、実行されるすべてのメソッドをログに出します。

import { Component, useState } from 'react';

class Logger extends Component {
    constructor(props) {
        super(props);
        this.state = { clicks: 0 };
        console.log('constructor');
    }
    static getDerivedStateFromProps(props, state) {
        console.log('getDerivedStateFromProps');
        return null;
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log('shouldComponentUpdate');
        return true;
    }
    getSnapshotBeforeUpdate() {
        console.log('getSnapshotBeforeUpdate');
        return null;
    }
    componentDidMount() {
        console.log('componentDidMount');
    }
    componentDidUpdate() {
        console.log('componentDidUpdate');
    }
    componentWillUnmount() {
        console.log('componentWillUnmount');
    }
    render() {
        console.log('render');
        return <button onClick={() => this.setState({ clicks: this.state.clicks + 1 })}>Clicks: {this.state.clicks}</button>;
    }
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            {show && <Logger />}
            <button onClick={() => setShow(!show)} style={{ marginInlineStart: 8 }}>Toggle</button>
        </div>
    );
}

マウントでは constructor、getDerivedStateFromProps、render、componentDidMount が記録されます。クリックすると getDerivedStateFromProps、shouldComponentUpdate、render、getSnapshotBeforeUpdate、componentDidUpdate が記録されます。shouldComponentUpdate が false を返すようにすると、クリックしてもボタンは更新されなくなります。stateは変わりますが、Reactがレンダリングを飛ばすのです。このようなクラスを関数に変換する方法は、クラスコンポーネントのページで紹介しています。

ライフサイクルではなく同期で考える

フックの対応表は古いコードを読むのに役立ちますが、大きな「マウントした」エフェクトと大きな「更新した」エフェクトを1つずつ作るような、クラスの癖をそのまま写したエフェクトを書かせてしまうことがあります。エフェクトは「この外部のものをこれらの値と同期させておく」と読むほうがよいのです。roomId に接続し、roomId が変わったら切断してもう一度接続する、という具合です。同期させるもの1つにつきエフェクトを1つ書き、それが使う値を依存値として並べ、いつ実行するかはReactに任せてください。