React - マウント，再レンダリング，アンマウントで起こること

はじめに

コンポーネントのマウント，再レンダリング，アンマウント時に起こることが曖昧だったので，基本的な内容をまとめてみます．

マウント

Reactにおけるコンポーネントのマウントとは，コンポーネントがDOMに初めて表示されることをいいます．

マウント時に起こること

• useStateの初期値の設定
• 関数コンポーネントの実行
• useRefの初期値の設定
• JSX が評価されて DOM に描画
• useEffectの実行

再レンダリング

再レンダリングが起きる条件については，簡単にこちらでまとめています，

再レンダリング時に起こること

• 関数コンポーネントの再実行
• JSX が再評価されて DOM に描画
• useEffectの実行
  • ただし，依存配列がない場合や，依存配列の要素が変更されたときに限ります．
    依存配列が[]の場合はマウント時のみの実行になります．

アンマウント

Reactにおけるコンポーネントのアンマウントとは，コンポーネントがDOMから削除されることをいいます．
例：以下の場合があります．

• ページ遷移でコンポーネントが画面から消えたとき
• 条件分岐でコンポーネントがnullになったとき

アンマウント時に起こること

• useEffectのクリーンアップ関数の実行

例えば，以下のコードでは，ボタンをクリックすることでshowTimerのtrue/falseを切り替えることで，TimerComponentをnullかどうかを制御することができます．
falseになったときは，TimerComponentがアンマウントされ，useEffectのクリーンアップ関数が実行されることで，"アンマウントされてタイマーを解除しました"がコンソールに表示されます．

const Timer = () => {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log("1秒ごとに表示しています");
    }, 1000);

    return () => {
      clearInterval(timer);
      console.log("アンマウントされてタイマーを解除しました");
    };
  }, []);

  return <div>タイマーが動作中です！</div>;
};

const Example = () => {
  const [showTimer, setShowTimer] = useState(true);

  return (
    <>
      <button onClick={() => setShowTimer((prev) => !prev)}>Timerの切り替え</button>
      {showTimer && <Timer/>}
    </>
  );
};

おわりに

マウント，再レンダリング，アンマウント時に起こる内容について基本的なものをまとめてみました．