---
# System prepended metadata

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

---

### useEffect
useEffect 讓你可以使用 function component 中的 side effect，side effect 包含資料 fetch 或手動改變 React component 中的 DOM。因此當每次更新時，在 useEffect 中沒有設定相依參數，將會持續被執行。

在常見的用法中，通常會代入相依的參數，來最佳化 useEffect 使用。
這邊會用陣列的方式作為可選的第二個參數傳遞給 useEffect，例如：
```jsx=
React.useEffect(() => {
   console.log(`資料一：點擊 ${countOne} 次`);
  }, [countOne]); // 初始後，僅更新 countOne 會觸發
```
可參考[範例](https://codepen.io/hexschool/pen/RwMrojp)幫助理解。

補充：
若只要在元件載入執行一次 useEffect，可以帶入空陣列，例如：
```jsx=
React.useEffect(() => {
   console.log(`執行一次`);
  }, []);
```

參考：[Synchronizing with Effects](https://react.dev/learn/synchronizing-with-effects#step-2-specify-the-effect-dependencies)

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/hexschool/pen/jOzWVRd)，並撰寫內容完成以下畫面。
![](https://i.imgur.com/9v9OA1q.gif)



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

<!-- 解答： 
```
React.useEffect(() => {
  console.log('count 初始值', count)
}, [])

React.useEffect(() => {
  console.log('count 當前值', count)
}, [count])
```
-->


回報區
---



|  #  | Discord | CodePen / 答案 |
|:---:|:-------:|:-------------:|
| 1 | Evan | [Codepen](https://codepen.io/evanz1215/pen/LYMEBdL) |
| 2 | Billy.Ji | [Codepen](https://codepen.io/yaj55ushydna/pen/MWZYBBw) |
| 3 | 羅羅 | [Codepen](https://codepen.io/bjqs02/pen/oNJgMmo) |
| 4 | zona | [Codepen](https://codepen.io/w242920/pen/xxmbJMd?editors=1111) |
| 5 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/eYbmjoz) |
| 6 | Jie016 | [Codepen](https://codepen.io/Jie-Kuo/pen/NWePBVZ) |
| 7 | yuchih | [Codepen](https://codepen.io/hijachu/pen/KKbwxKp?editors=1011) |
| 8 | Lishang | [Codepen](https://codepen.io/LiShang/pen/gOZbjyQ) |
| 9 | Wei_Rio | [Codepen](https://codepen.io/wei_wu/pen/ExGaeYm) |
| 10 | Sui | [Codepen](https://codepen.io/suihsilan/pen/XWoJPbM?editors=0010) |
| 11 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/bGONxWN) |
| 12 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/WNLbgjQ) |
| 13 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/NWePLvG) |
| 14 | collinkao | [Codepen](https://codepen.io/collin0825/pen/KKbwxXg) |
| 15 | jerry456789 | [Codepen](https://codepen.io/aria198a/pen/eYbmLyE?editors=1011) |
| 16 | Wendy | [Codepen](https://codepen.io/wendy03/pen/ZEVYqBR) |
| 17 | cataska | [Codepen](https://codepen.io/lovecankill/pen/QWzwZMa) |
| 18 | 大頭 | [Codepen](https://codepen.io/d22495521/pen/poqvZem?editors=1111) |
| 19 | Aden | [Codepen](https://codepen.io/Osases/pen/gOZbBNx) |
| 20 | Kent | [Codepen](https://codepen.io/labkunz/pen/ZEVYqxm?editors=1111) |
| 21 | smalljie | [Codepen](https://codepen.io/smalljie/pen/ExGaOmP) |
| 22 | ejchuang | [Codepen](https://codepen.io/EJChuang/pen/ZEVYmMb?editors=1011)  |
| 23 | David0799 | [Codepen](https://codepen.io/David0799/pen/MWZYqeb) |
| 24 | 瑀君 | [Codepen](https://codepen.io/yennnnn/pen/Bavyvoe?editors=1111) |
| 25 | BalaBambe | [Codepen](https://codepen.io/bambe-chen/pen/PoXwXqL) |
| 26 | Hsien | [CodePen](https://codepen.io/Hsienlu/pen/dywPwVg?editors=1111)|
| 27 | 金魚 | [CodePen](https://codepen.io/cso-goldfish/pen/RwENEJm) |
| 28 | jasperlu005. | [Codepen](https://codepen.io/uzzakuyr-the-reactor/pen/xxmbmJz?editors=0011) | 
| 29 | 精靈 | [Codepen](https://codepen.io/vesbexih-the-bashful/pen/rNoaoXv?editors=1111) | 
| 30 | Leo | [Codepen](https://codepen.io/Aruminiya/pen/dywPaPB?editors=1111) |
| 31| 汪汪 | [Codepen](https://codepen.io/hunwooooof/pen/rNoBbrZ) |
| 32 | Kaya | [Codepen](https://codepen.io/laron9486/pen/NWePJzJ) |
| 33 | SKey | [Codepen](https://codepen.io/Dale-Chien/pen/vYvEMZv) |
| 34 | 地球儀 | [Codepen](https://codepen.io/dayday1222/pen/KKbwYxa?editors=0011) |
| 35 | 喃喃 | [Codepen](https://codepen.io/VeLario/pen/ZEVYdzZ?editors=0011) |
| 36 | 王偉青 | [Codepen](https://codepen.io/lovegull/pen/LYMEKZR?editors=0011) |
| 37 | shcopy | [Codepen](https://codepen.io/shcopy/pen/oNJgrzY) |
| 38 | Amberhh | [Codepen](https://codepen.io/Amberhh/pen/abPzezw?editors=1011) |
| 39 | Yen | [Codepen](https://codepen.io/TZU-HUANG-YEN/pen/wvRBVqv?editors=0011) |
| 40 | Iris | [Codepen](https://codepen.io/iris831206/pen/XWoJvBV) |
| 41 | wendy | [Codepen](https://codepen.io/siaochanwu/pen/bGONXQE)|
| 42 | Lulu | [Codepen](https://codepen.io/yaj55ushydna/pen/MWZYBBw?editors=1011)|
| 43 | rainnping | [Codepen](https://codepen.io/rainnping/pen/VwqLwdM)|
| 44 | Liam | [Codepen](https://codepen.io/liamkkobe/pen/PoXqwWg?editors=0011)|
| 45 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/gOZpbbZ) |
| 46 | Ingrid | [Codepen](https://codepen.io/ingrid-chi/pen/RwEPWJQ?editors=1011) |
| 47 | 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/GRPJqvy) |
| 48 | orias_000 | [codePen](https://codepen.io/qoq77416416/pen/yLGNJoW?editors=1011) |
| 49 | PollyPO_Lee | [Codepen](https://codepen.io/pollypo1986/pen/VwqLWwj) |
| 50 | davidchengtw | [Codepen](https://codepen.io/davidcheng/pen/VwqLpGq) |
| 51 | 變羊魔法 | [Codepen](https://codepen.io/cssf998811/pen/GRPJOEO) |
| 52 | JJ Wu | [Codepen](https://codepen.io/jesswu/pen/zYyGoae?editors=1011) |
| 53 | Tian | [Codepen](https://codepen.io/ccyy915/pen/XWobZEy) |
| 54 | Ataraxia | [Codepen](https://codepen.io/ataraxia8888/pen/vYvOmJE) |
| 55 | azami | [Codepen](https://codepen.io/bjqs02/pen/oNJgMmo) |
| 56 | curry | [Codepen](https://codepen.io/Ted19851223/pen/NWeqOYg?editors=1011) |
| 57 | PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/RwEPdyL?editors=1011) |
| 58 | Sebastian | [Codepen](https://codepen.io/SebastianWei/pen/KKbdwNK?editors=0011) |
| 59 | Nikki | [Codepen](https://codepen.io/Nikki-Kang/pen/jOXbMeb) |
| 60 | Emily4869 | [Codepen](https://codepen.io/aptx4869Emily/pen/wvRMGrK?editors=0011) |
| 61 | SkyWoW | [Codepen](https://codepen.io/WoW-Sky/pen/abPvQPO?editors=1111) |
| 62 | 小明#4408 | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/bGOEamJ?editors=0011) |
| 63 | shangchu | [Codepen](https://codepen.io/shangchu0412/pen/jOXWRRN?editors=1111) |
| 64 | hungya | [Codepen](https://codepen.io/hungya777/pen/gOZrBGE?editors=1010) |
| 65 | Cami | [Codepen](https://codepen.io/fayevivi/pen/qBLNWvK?editors=1111) |
| 66 | Owen | [Codepen](https://codepen.io/owen-dong/pen/mdaEpXw?editors=0011) |
| 67 | jiun7523 | [Codepen](https://codepen.io/jiun-jiun/pen/GRPjZzw) |
| 68 | Alice | [Codepen](https://codepen.io/AliceZhao/pen/YzdGWMK?editors=0011) |
| 69 | EdHsu | [Codepen](https://codepen.io/Ed-Hsu/pen/GRPjNdX) |
| 70 | yoyo#2678 | [Codepen](https://codepen.io/djmliogn-the-flexboxer/pen/KKbgvMQ?editors=1011) |
| 71 | rChinnnn | [Codepen](https://codepen.io/rChinnnn/pen/WNLoyqW) |
| 72 | Carey#1010 | [Codepen](https://codepen.io/Leo4077/pen/qBLrGgd) |
| 73 | ssshane | [Codepen](https://codepen.io/sam6091260/pen/mdawdOm?editors=0011) |
| 74 | Lydia | [Codepen](https://codepen.io/lydia-chen/pen/MWdJooG?editors=1012) |

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