📑

Pt2. UseEffectの基本的な使い方

に公開
React
tech

useEffectのクリーンアップ処理

useEffectは戻り値として関数を返却することができる。
その関数のことをクリーンアップ処理と言う。
クリーンアップ処理はコンポーネントが破棄される際に実行される。

1, 依存配列が空のuseEffectのCallBackとCleanUpのタイミング

import { useEffect, useState } from "react";

const Example = () => {
  const [isDispaly, setIsDispaly] = useState(true);

  const changeDisplay = () => {
    setIsDispaly(prev => !prev)
  }

  return (
    <>
      { isDispaly && <Counter />}
      <button onClick={changeDisplay}>{isDispaly ? "非表示" : "表示"}</button>
    </>
  )
}

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

  useEffect(() => {
    console.log('init!');

    return () => {
      console.log('component break!');
    }
  }, []) -----> 空

  const changeCount = () => {
    setCount(prev => (prev + 1))
  }
  return (
    <h3>
      <p>カウント：{count}</p>
      <button onClick={changeCount}> + </button>
    </h3>
    );
};

export default Example;

1-1, 処理の流れの順序

初期レンダリングを行ってCounterコンポーネント表示。

1, Counterコンポーネント描画開始、state初期値定義(count = 0)
2, JSX描画(count = 0)
3, useEffect callback 実行
4, Counterコンポーネント描画終了

+ボタン押下

5, 更新用関数(setCount)実行、state(count)の値更新
6, Counterコンポーネント再描画開始
7, JSX描画(count = 1)
8, Counterコンポーネント描画終了

非表示ボタンを押して、Counterコンポーネント削除

9, useEffect cleanup実行
10, Counterコンポーネント削除

2, 依存配列にcountを持つuseEffectのCallBackとCleanUpのタイミング


import { useEffect, useState } from "react";

const Example = () => {
  const [isDispaly, setIsDispaly] = useState(true);

  const changeDisplay = () => {
    setIsDispaly(prev => !prev)
  }

  return (
    <>
      { isDispaly && <Counter />}
      <button onClick={changeDisplay}>{isDispaly ? "非表示" : "表示"}</button>
    </>
  )
}

const Counter = () => {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    console.log('init!!!');

    return () => {
      console.log('component break!!!!');
    }
  }, [count]); -----> count を持つ

  return (
    <h3>
      <p>カウント：{count}</p>
      <button onClick={changeCount}> + </button>
    </h3>
    );
};

export default Example;

2-1, 処理の流れの順序

初期レンダリングを行ってCounterコンポーネント表示。

1, Counterコンポーネント描画開始、state初期値定義(count = 0)
2, JSX描画(count = 0)
3, useEffect callback 実行
4, Counterコンポーネント描画終了

+ボタン押下

5, 更新用関数(setCount)実行、state(count)の値更新
6, Counterコンポーネント再描画開始
7, JSX描画(count = 1)
8, useEffect cleanup 実行
9, useEffect callback 実行
10, Counterコンポーネント描画終了

非表示ボタンを押して、Counterコンポーネント削除

11, useEffect cleanup実行
12, Counterコンポーネント削除

まとめ

空の配列を持つuseEffectはコンポーネントのレンダリング時にCallBackが、コンポーネント破棄時にCleanUpが実行される。

依存配列にstate値（今回で言う所のcount）を含めると、コンポーネントの最初のレンダリング時にCallBackが実行される。
そしてcountを更新すると再レンダリングが実行され、CleanUp、CallBackの順に処理される。
コンポーネント破棄時にはCleanUpのみが実行される。

※依存配列の値を更新し、再レンダリングするとCleanUpから先に行われることに注意。

Discussion