useEffect - cleanup

useEffect Cleanup

useEffectのcleanupはuseEffectHookの機能であり、コンポーネントで登録したuseEffectを削除する役割を担当しています。
このcleanupは以下の二つのケースで実行されます。

①useEffectが実施する前。
②コンポーネントがアンマウントされる前。

実装方法はuseEffectにreturnを定義し、returnの中で上の①と②の時に実施させたい機能を記述すればいいです。

 

App.js

import React, { useState, useEffect } from "react";
import Timer from "./component/Timer";

function App() {
  const [showTimer, setShowTimer] = useState(false);

  return (
    <div>
      {showTimer && <Timer />} 
      <button onClick={()=>setShowTimer(!showTimer)}>Toggle Timer</button>
    </div>
  );
}

export default App;

 

Timer.js

import React, { useEffect }from 'react';

const Timer = (props) => {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log("Timer Working...");
    }, 1000);

    return () => {
      clearInterval(timer);
    }
  },[]);

  // []とは、コンポーネントがマウントされる時に１回しか実行されない。
  // そのため、intervalは継続実行される。
  // もし、timerコンポーネントにreturnを定義してくれないと永遠にsetIntervalは動作しますが
  // returnを定義することにより、コンポーネントがアンマウントされる
  // 直前にreturnが実行されユーザが定義したい行動を定義することが可能になる。

  return (
    <div>
      <span>get start timer</span>
    </div>
  )
}

export default Timer;

 

https://youtu.be/kyodvzc5GHU

https://blog.logrocket.com/understanding-react-useeffect-cleanup-function/#:~:text=What%20is%20the%20useEffect%20cleanup,itself%20using%20the%20cleanup%20function.