ライフサイクルについて書いてみる【React】

ライフサイクルとは

ライフサイクルとは、Reactのコンポーネントが生まれてから成長し、最終的に死ぬまでの一連の過程のことを表す。ライフサイクルは以下の3種類が存在する。

Mounting

コンポーネントが画面に描画されるまでの期間。
アプリケーションの表示を作っていくタイミングで、コンポーネントがレンダリングされる。

Updating

コンポーネントが変更される期間。
コンポーネントの中で状態が変化したタイミング。

Unmounting

コンポーネントが破棄される期間。
別ページに移動やコンポーネントがいらなくなったタイミング。

useEffectとは

レンダリングによって引き起こされるフック。
Reactではコンポーネントの変化が起こると、return文の中身が再描画される仕組みになっている。
再描画されたタイミングで、何か実行したい処理がある場合に、useEffectを使うことになる。

例

Count.tsx

import { useState, useEffect } from 'react';

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

  const countUp = () => {
    setCount((prevState) => prevState + 1);
  };

  const countDown = () => {
    setCount((prevState) => prevState - 1);
  };

  useEffect(() => {
    console.log('count: ', count);
  });

  return (
    <div>
      <p>カウント数</p>
      <button onClick={countUp}>+</button>
      <button onClick={countDown}>-</button>
    </div>
  );
};

リロードしたタイミング（マウント後の処理）

初回のレンダリングが終わった後に、useEffectが実行される。(レンダリング後の処理)

更新後の処理

+ or - ボタンを押すと、stateが変更され、レンダリング後にuseEffectの中身が実行される。

第二引数によって、実行タイミングを制御できる

Count.tsx

// 毎回実行
useEffect (() => {
    console.log('count: ', count);
})

// 初回レンダリングのみ実行
useEffect(() => {
    console.log('count: ', count);
}, [])

// triggerが変更されるたびに実行
useEffect(() => {
    console.log('count: ', count);
}, [trigger])

// trigger1かtrigger2が変更されるたびに実行
useEffect(() => {
    console.log('count: ', count);
}, [trigger1, trigger2])

簡単ではありますが、以上！