---
# System prepended metadata

title: "\U0001F3C5 Day 14｜React Hook - useEffect 關閉 setInterval"
tags: [2023 React 入門攻略工作坊]

---

一般使用 setInterval()，setInterval() 方法會回傳 interval ID，我們可以透過 interval ID 將這個 setInterval() 清除
例如：
```js
const intervalId = setInterval(() => {
...
},1000)

clearInterval(intervalId)
```

當我們在 useEffect() 使用到 setInterval()，需要在元件移除時將 setInterval() 清除，可以在 useEffect() 裡面的 Effect 函式使用 return，並回傳另一個函式，這個函式會在該元件移除時被呼叫。
例如：
```js
React.useEffect(() => {
    const intervalId = setInterval(() => {
      ...
    }, 1000)

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

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

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


![](https://hackmd.io/_uploads/HkKlGEcs2.gif)







## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
![](https://i.imgur.com/vftL5i0.png)

<!-- 解答： 
```
function Child({count, setCount}) {
  
  React.useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(pre => pre + 1);
    }, 1000)
    return () =>clearInterval(intervalId)
  },[])

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

```
-->


回報區
---


|  #  | Discord | CodePen / 答案 |
|:---:|:-------:|:-------------:|
| 1 | collinkao | [CodePen](https://codepen.io/collin0825/pen/NWeqOwj)|
| 2 | 大頭 | [CodePen](https://codepen.io/d22495521/pen/qBLdJqg)|
| 3 | LinaChen | [CodePen](https://codepen.io/LinaChen/pen/WNLvaMO) |
| 4 | Billy.Ji | [Codepen](https://codepen.io/yaj55ushydna/pen/VwqLEEY) |
| 5 | 羅羅 | [Codepen](https://codepen.io/bjqs02/pen/dywogJx) |
| 6 | Evan | [Codepen](https://codepen.io/evanz1215/pen/XWobxyo) |
| 7 |HsienLu|[Codepen](https://codepen.io/Hsienlu/pen/dywogQP?editors=1010)
| 8 | shcopy | [Codepen](https://codepen.io/shcopy/pen/dywogwP) |
| 9 | ryan_chou | [Codepen](https://codepen.io/csw8524/pen/yLGNRGE) |
| 10 | yuchih | [Codepen](https://codepen.io/hijachu/pen/PoXqyvp?editors=1010) |
| 11 | Wendy3 | [Codepen](https://codepen.io/your-work/) |
| 12| Jie016 | [Codepen](https://codepen.io/Jie-Kuo/pen/ExGjdJJ) |
| 13 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/RwEPqKV) |
| 14 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/GRPJPZX) |
| 15 | Aden | [Codepen](https://codepen.io/Osases/pen/zYyGypz) |
| 16 | cataska | [Codepen](https://codepen.io/lovecankill/pen/qBLdLyY) |
| 17 | smalljie | [Codepen](https://codepen.io/smalljie/pen/MWZwZQj) |
| 18 | PollyPO_Lee | [Codepen](https://codepen.io/pollypo1986/pen/MWZwZNo) |
| 19 | jerry456789 | [Codepen](https://codepen.io/aria198a/pen/vYvObWY?editors=1010) |
| 20 | Kaya | [Codepen](https://codepen.io/laron9486/pen/jOXPdxa) |
| 21 | ejchuang | [Codepen](https://codepen.io/EJChuang/pen/jOXPdgx) |
| 22 | BalaBambe | [Codepen](https://codepen.io/bambe-chen/pen/rNoVRoV) |
| 23 | David0799 | [Codepen](https://codepen.io/David0799/pen/WNLvmYL) |
| 24 | Lulu | [Codepen](https://codepen.io/Lin-Lulu/pen/wvRaZGO?editors=1010) |
| 25 | Wei_Rio | [Codepen](https://codepen.io/wei_wu/pen/mdaJYpJ) |
| 26 | Yen | [Codepen](https://codepen.io/TZU-HUANG-YEN/pen/jOXPjqp?editors=1010) |
| 27 | jasperlu005 | [Codepen](https://codepen.io/uzzakuyr-the-reactor/pen/eYbNwKO?editors=0010) |
| 28 | 地球儀 | [Codepen](https://codepen.io/dayday1222/pen/BavNgRY?editors=0010) |
| 29 | 王偉青 | [Codepen](https://codepen.io/lovegull/pen/poqJMNv?editors=0010) |
| 30 | wendy | [Codepen](https://codepen.io/siaochanwu/pen/PoXqMQg)|
| 31 | orias_000 | [Codepen](https://codepen.io/qoq77416416/pen/bGOVGrM?editors=1010) |
| 32 | 喃喃 | [Codepen](https://codepen.io/VeLario/pen/dywYyvX?editors=0010) |
| 33 | 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/ZEVbYEG) |
| 34 | Sebastian | [Codepen](https://codepen.io/SebastianWei/pen/jOXbEaE?editors=0010) |
| 35 | 精靈 | [Codepen](https://codepen.io/vesbexih-the-bashful/pen/zYyvGmM) |
| 36 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/GRPpJBo) |
| 37 | Ingrid | [Codepen](https://codepen.io/ingrid-chi/pen/LYMpGmd?editors=0010) |
| 38 | azami | [Codepen](https://codepen.io/azami/pen/RwEWGRy) |
| 39 | Nikki | [Codepen](https://codepen.io/Nikki-Kang/pen/XWomjog) |
| 40 | Kent | [Codepen](https://codepen.io/labkunz/pen/mdaeOWb?editors=1010) |
| 41 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/jOXbVwm) |
| 42 | 瑀君 | [Codepen](https://codepen.io/yennnnn/details/BavNeBN) |
| 43 | davidchengtw | [Codepen](https://codepen.io/davidcheng/pen/OJrypVo)|
| 44 | Sui | [Codepen](https://codepen.io/suihsilan/pen/XWomxWa?editors=0010)|
| 45 | rainnping | [Codepen](https://codepen.io/rainnping/pen/gOZaQOw) |
| 46 | SkyWoW | [Codepen](https://codepen.io/WoW-Sky/pen/oNJjQKB) |
| 47 | curry | [Codepen](https://codepen.io/Ted19851223/pen/zYyveJL?editors=1010) |
| 48 | Amberhh | [Codepen](https://codepen.io/Amberhh/pen/RwErKxG) |
| 49 | 變羊魔法 | [Codepen](https://codepen.io/cssf998811/pen/BavjJJG) |
| 50 | JJ Wu | [Codepen](https://codepen.io/jesswu/pen/vYvOPaJ) |
| 51 | shangchu | [Codepen](https://codepen.io/shangchu0412/pen/oNJbRjq?editors=1111) |
| 52 | PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/poqgXvW) |
| 53 | Ataraxia | [Codepen](https://codepen.io/ataraxia8888/pen/ZEVbQzY) |
| 54 | Iris | [Codepen](https://codepen.io/iris831206/pen/NWerPLO) |
| 55 | 小明#4408 | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/NWeNMqY) |
| 56 | Cami | [Codepen](https://codepen.io/fayevivi/pen/NWerVRo) |
| 57 | Alice | [Codepen](https://codepen.io/AliceZhao/pen/NWeRwOR?editors=0011) |
| 58 | Owen | [Codepen](https://codepen.io/owen-dong/pen/GRPrmvE?editors=0010) |
| 59 | jiun7523 | [Codepen](https://codepen.io/jiun-jiun/pen/gOZmvKW?editors=1010) |
| 60 | Carey#1010 | [Codepen](https://codepen.io/Leo4077/pen/abPJgNv) |
| 61 | ssshane | [Codepen](https://codepen.io/sam6091260/pen/ZEVyEaN?editors=0011) |
| 62 | Lydia | [Codepen](https://codepen.io/lydia-chen/pen/VwOpBMJ) |




```markdown=
| 0 | user | [Codepen]() |
```