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

在常見的用法中，通常會代入相依的參數，來最佳化 useEffect 使用。
這邊會用陣列的方式作為可選的第二個參數傳遞給 useEffect，例如：

React.useEffect(() => {
   console.log(`資料一：點擊 ${countOne} 次`);
  }, [countOne]); // 初始後，僅更新 countOne 會觸發

可參考[範例](https://codepen.io/hexschool/pen/RwMrojp)幫助理解。

補充：
若只要在元件載入執行一次 useEffect，可以帶入空陣列，例如：

React.useEffect(() => {
   console.log(`執行一次`);
  }, []);

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

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/mdNgRra)，並撰寫內容完成以下畫面。

## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

<!-- 解答：

React.useEffect(() => {
  console.log('count 初始值', count)
}, [])

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

-->

回報區
---
| # | Discord | CodePen / 答案 |
|:---:|:-------------- |:----------------------------------------------------------------------------- |
| 1 | MY | [Codepen](https://codepen.io/ahmomoz/pen/YPKevzB?editors=1111) |
| 2 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/raBopXd?editors=1011) |
| 3 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/ZYzNLba) |
| 4 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/zxOQNzJ?editors=1111) |
| 5 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/GgKarPj) |
|6|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/mybYRYr?editors=1011)|
| 7 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/JoPqWdj?editors=1011) |
| 8 | Nocab | [Codepen](https://codepen.io/PeihanWang/pen/jENoBbp?editors=1011) |
| 9 | Jasmine | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/dPbENeb) |
| 10 | Amanda | [Codepen](https://codepen.io/cym199922/pen/EaYzXdr) |
| 11 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/RNbmZbG) |
| 12 | han |[Codepen](https://codepen.io/iamHanCheng/pen/WbeBEBm?editors=1111)|
| 13 | Clove | [Codepen](https://codesandbox.io/p/sandbox/2v9f59) |
| 14 | Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/NPKVYqN) |
| 15 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/JoPmbQW?editors=1111) |
| 16 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/RNbmXpK) |
| 17 |邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/zxOVORZ?editors=1011)|
| 18 | 蘑菇星星 | [Codepen](https://codepen.io/brrrieon-the-vuer/pen/azogbgM?editors=1111) |
| 19 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/jENjWNY) |
| 20 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/MYgMQXK?editors=0011)|
| 21 | Yen | [Codepen](https://codepen.io/yuxxxlouyen/pen/OPLevaN) |
| 22 | Johnson | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/EaxYVwv) |
| 23 | Toung | [Codepen](https://codepen.io/Toung/pen/NPWPoXv) |
| 24 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/OPJNeEX?editors=1111) |
| 25 | 郭芙蘭| [Codepen](https://codepen.io/flora_Kuo/pen/zxYKVvZ?editors=1011) |
| 26 | Joannehu| [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/LEYLQQq?editors=1111) |
| 27 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/YPzEBNE?editors=0011) |
| 28 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/ByaOrzQ?editors=1011) |
| 29 | jinliu214 | [Codepen](https://codepen.io/jinliu214/pen/EaarrPW?editors=0011) |
| 30 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/OPVqqRj?editors=1111) |
| 31 | shin_kai | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/myVORxR) |

---

- 快速複製格式：

| 0 | user | [Codepen]() |