# 🏅Day34 - React 基礎練習 (11) - useEffect 如何關閉 setInterval

### 關閉 setInterval 目的
在 React 中，關閉計時器不只是為了保持程式碼乾淨，更是為了避免以下問題：

- 「元件消失了，但計時器還在跑」
當元件被移除時，JavaScript 並不會自動幫你停下 setInterval，它會繼續在背景運作，嘗試去更新一個已經不存在的元件狀態，導致記憶體洩漏 (Memory Leak)。
- 「計時器累加疊加」
如果不執行清除動作，每次元件重新建立時都會啟動一個新的計時器，如果你反覆切換開關 10 次，背景就會有 10 個計時器同時在跑，數字跳動的速度會變得異常混亂，最終導致瀏覽器效能崩潰。

使用 setInterval() 時，setInterval() 方法會回傳 interval ID，我們可以透過 interval ID 將這個 setInterval() 清除
例如：

const intervalId = setInterval(() => {
...
}, 1000)

clearInterval(intervalId)

當我們在 useEffect() 使用到 setInterval()，需要在元件移除時將 setInterval() 清除，可以在 useEffect() 裡面的 Effect 函式使用 return，並回傳另一個函式，這個函式會在該元件移除時被呼叫。
例如：

React.useEffect(() => {
    const intervalId = setInterval(() => {
      ...
    }, 1000)

    return () =>clearInterval(intervalId)
  },[])

這樣就可以透過 useEffect() 控制元件建立及移除時需要做的事。

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/YzmMNZJ)，在 Child 元件移除時執行 clear() 方法，完成後會呈現以下畫面。


<!-- 解答：

function Child({count, setCount}) {
  
  React.useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(pre => pre + 1);
    }, 1000)
    return () =>clearInterval(intervalId)
  },[])

  return <h1>Child 元件: {count}</h1> 
}

-->

| Name | Codepen |
| -------- | -------- |
| Mikka | [codepen](https://codepen.io/Miikaa/pen/bNewKPV) |
| 7lun | [codepen](https://codepen.io/mfyvqhsn-the-bold/pen/emzGZKr?editors=1010) |
| Tetsu |[Codepen](https://codepen.io/ttgchang/pen/zxBpmmE)|
|TWLeoC|[Codepen](https://codepen.io/TWLeoC/pen/QwEaZJy?editors=0010)|
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/VYjyVPO?editors=1010)|
| Chia |[Codepen](https://codepen.io/Chia-the-encoder/pen/QwEaJxM)|
| 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/raLpQrZ?editors=1010)|
| 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/bNeaObo?editors=0010)|
| Rogan |[Codepen](https://codepen.io/RoganHsu/pen/yyJpGNx)|
| Eric | [Codepen](https://codepen.io/wc-su/pen/pvbpqXM) |
| cks40660 | [Codepen](https://codepen.io/CKS40660/pen/azZEMyR) |
| RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/NPrXJvd?editors=0010) |
| Jin | [Codepen](https://codepen.io/Jin-L/pen/zxBpbmM) |
| 社子畢卡索 | [Codepen](https://codepen.io/pen?template=YPWYggX) |
| 小懿 | [Codepen](https://codepen.io/YT-the-vuer/pen/myEpZBy?editors=0010) |
| wind | [Codepen](https://codepen.io/wind7y/pen/PwzEMmJ) |
| Melanie | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/jErZNoq) |
| Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/gbMvObV?editors=1010) |
| Percy | [Codepen](https://codepen.io/Percy-Ku/pen/XJKgjYZ) |
| 平平 | [Codepen](https://codepen.io/ypinpin/pen/LEZQYKP) |
| kashiwatei | [Codepen](https://codepen.io/kashiwatei/pen/OPXQVEG?editors=1010) |
| Eileen | [Codepen](https://codepen.io/Eileen-io/pen/WbxMGwM) |
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/vEKdJZX?editors=1010) |
| andy | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/MYeQOOE?editors=1010) |
| Jenna | [Codepen](https://codepen.io/abiscc14/pen/vEKRBKe) |
| 7Red | [Codepen](https://codepen.io/cch2655/pen/YPWaVJa) |
| JiaMori | [Codepen](https://codepen.io/jiamori/pen/azZYaQe) |
| 星雪糖 | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/wBWjEbq?editors=0011) |