【React】 コンポーネントが破棄されたときに変数を初期化する。

今回のテスト
カウントされるタイマーを表示し、ボタンをクリックすると、タイマーが消える。
再度ボタンをクリックすると、タイマーが表示され、カウントが開始される。

■以下親コンポーネントのコード
①子コンポーネントのTimerをインポート
②タイマーの表示有無を管理するstateであるdisplayを定義
③②のdisplayをボタンをクリックする度に変更(true,false)する処理を実装

TimerContainer.js

import React,{useState} from 'react'
import Timer from './Timer'
const TimerContainer = () => {
    const [display,setDisplay] = useState(true)
    return (
        <div>
            <button onClick={()=>setDisplay(!display)}>switch timer</button>
            {display && <Timer />}
        </div>
    )
}

export default TimerContainer

■以下子コンポーネントのコード
①useState,useEffectをインポート
②タイマーの値を格納するstateであるcntを定義
③呼び出される度に1を足していくtime関数を作成
④初めの一回しかよばれれないuseEffectを定義する
　また、③のtime関数を1秒ごとに呼び出して、その値を格納するinterval変数を定義する
⑤Timerコンポーネントが破棄されたときに、④のintervalを破棄するclearIntervalを実装
⑥経過秒数を格納しているCntをブラウザに表示する処理を実装

Timer.js

import React,{useState,useEffect} from 'react'

const Timer = () => {

    const [cnt,setCnt] = useState(0)

    const time = () =>{
        setCnt(prevCnt => prevCnt+1)
    }
    useEffect(()=>{
        const interval = setInterval(time,1000)
        return () => {
            clearInterval(interval)
            console.log("cleared")
        }
    },[])
    return (
        <div>
            {cnt}
        </div>
    )
}

export default Timer

■結果
カウントされるタイマーを表示され、ボタンをクリックすると、タイマーが消える。
再度ボタンをクリックすると、タイマーが表示され、カウントが開始される。
■補足
注意として、clearIntervalをコメントしても表面上の処理は同じです。
では、なぜclearIntervalをするのかというと、
一度目のコンポーネント(カウント処理)と、二度目のコンポーネント（カウント処理）は別の世界線なので、一度目のコンポーネントを破棄しているのに内部でカウント処理（setInterval）が実行されつづけ、目には見えないがブラウザの負担が増えていくことになるため。