# 🏅Day32 - React 基礎練習 (9) - useEffect

### 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/fhljksmg-the-styleful/pen/ZYOLwrE?editors=0011)幫助理解。

補充：
若只要在元件載入執行一次 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/fhljksmg-the-styleful/pen/XJKpOBX?editors=0011)，並撰寫內容完成以下畫面。

<!-- 解答：

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

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

-->

| Name | Codepen |
| -------- | -------- |
| 7lun | [codepen](https://codepen.io/mfyvqhsn-the-bold/pen/dPXWjRV?editors=0011) |
| Miikaa | [codepen](https://codepen.io/Miikaa/pen/bNeoLPW) |
| Jin | [codepen](https://codepen.io/Jin-L/pen/ZYOaaJM) |
| Chia |[Codepen](https://codepen.io/Chia-the-encoder/pen/yyJPPrGv)|
| 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/XJKzzQL?editors=0011)|
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/pvbdpoq?editors=0011)|
| Tetsu |[Codepen](https://codepen.io/ttgchang/pen/MYeOrgx)|
| Rogan |[Codepen](https://codepen.io/RoganHsu/pen/vEKWpyJ?editors=0011)|
| 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/gbMXoXz?editors=0011)|
| Marco |[Codepen](https://codepen.io/MarcoChiu/pen/PwzOEvX)|
| 社子畢卡索 |[Codepen](https://codepen.io/pen?template=PwzOQYV)|
| RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/VYjrQKG?editors=0011)|
| KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/myEqqwP?editors=0111)|
|cks40660 |[Codepen](https://codepen.io/CKS40660/pen/emzerLp)|
| 平平 |[Codepen](https://codepen.io/ypinpin/pen/raLYvPL)|
| Eileen |[Codepen](https://codepen.io/Eileen-io/pen/ZYOajKj)|
| 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/yyJPqwQ?editors=0011)|
| Melanie |[Codepen](https://codepen.io/pnrcspte-the-animator/pen/pvbdOyG)|
| Eric | [Codepen](https://codepen.io/wc-su/pen/jEravLJ) |
| Percy | [Codepen](https://codepen.io/Percy-Ku/pen/xbOrELj) |
| kashiwatei | [Codepen](https://codepen.io/kashiwatei/pen/emzeXBK?editors=0011) |
| Jenna | [Codepen](https://codepen.io/abiscc14/pen/RNRjOvy) |
| 星雪糖 | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/gbMoaZg?editors=0011) |
| 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/wBWpMZR?editors=0011) |
| andy | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/KwMZMZZ?editors=0011) |
|TWLeoC|[Codepen](https://codepen.io/TWLeoC/pen/wBWpqZQ?editors=0011)|
| 7Red | [Codepen](https://codepen.io/cch2655/pen/JoKMpjN) |
| wind | [Codepen](https://codepen.io/wind7y/pen/yyJpjYR) |
| Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/jErZNRq?editors=0011) |
| JiaMori | [Codepen](https://codepen.io/jiamori/pen/emzVQbr?editors=0011) |