---
# System prepended metadata

title: "\U0001F3C5 Day 5｜React Hook - useEffect"
tags: [2022 React 新手讀書會]

---

---
tags: 2022 React 新手讀書會
---
# 🏅 Day 5｜React Hook - useEffect
### 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(`執行一次`);
  }, []);
```

[參考：使用 Effect Hook](https://zh-hant.reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects)

## 題目
請複製 （右下角 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 / 答案                                                               |
|:-----------------------:|:---------------------------------------------------------------------------- |
|       Rice #8043        | [CodePen](https://codepen.io/riecball/pen/Yzaxjea?editors=1011)              |
|      Eric Su#7798       | [CodePen](https://codepen.io/wc-su/pen/QWmmvJN)                              |
|       布魯諾#7239       | [CodePen](https://codepen.io/bruno-yu/pen/wvmmVpj?editors=1011)              |
|           aki           | [Codepen](https://codepen.io/aki168/pen/OJvvKZv)                             |
|        棒腿#9350        | [Codepen](https://codepen.io/frankHsu/pen/JjLLgpG?editors=1011)              |
|        魚魚#0937        | [Codepen](https://codepen.io/fish0522/pen/poLLMdq)                           |
|     DIANAxAKKO#4298     | [Codepen](https://codepen.io/redfire29/pen/eYMMqLO?editors=1011)             |
|        葉秋#2335        | [Codepen](https://codepen.io/as880074/pen/gOeeVdv?editors=1111)              |
|       Evonne#7078       | [Codepen](https://codepen.io/Hsu1Fang/pen/GRxxVzQ?editors=1011)              |
|        Vita#4585        | [Codepen](https://codepen.io/showlovezz/pen/OJvvKrE?editors=0011)            |
|       Paper#1658        | [Codepen](https://codepen.io/paper_hsiao/pen/QWmrLLP)                        |
|       CofCat#9226       | [Codepen](https://codepen.io/cofcat456/pen/zYWjOvB?editors=1011)             |
|        ZengZeng         | [Codepen](https://codepen.io/tyzyoko/pen/zYWjOGB)                            |
|       黃士桓#7654       | [CodePen](https://codepen.io/shr-huan-huang/pen/xxWjKZq)                     |
|       JarDar#6980       | [Codepen](https://codepen.io/jardarpen/pen/GRxdKoB)                          |
|       AllenW#1132       | [Codepen](https://codepen.io/AllenW/pen/vYRjBBp?editors=1011)                |
|       yunyun#5215       | [Codepen](https://codepen.io/yun_yunni/pen/VwXxZKQ)                          |
|       IceSam#7836       | [Codepen](https://codepen.io/sam-hsu/pen/YzaLKWe)                            |
|        𝓛𝓊𝒸𝓎#8635        | [Codepen](https://codepen.io/lucygirl/pen/wvmjwGN)                           |
|        RON#2813         | [Codepen](https://codepen.io/Ron115/pen/poLVzev)                             |
|       hobby#6565        | [Codepen](https://codepen.io/hobbyling/pen/poLVzPJ)                          |
|        Kimi#2092        | [Codepen](https://codepen.io/a3216lucy/pen/oNqdvoE)                          |
|       wiimax#4564       | [Codepen](https://codepen.io/willismax/pen/dymebjK)                          |
|     Bumble幫啵#0255     | [Codepen](https://codepen.io/lmpzezvw-the-lessful/pen/XWEqroa)               |
|       Arista#5802       | [Codepen](https://codepen.io/arista-hsieh/pen/JjLvPmp)                       |
|        Ayre#0016        | [Codepen](https://codepen.io/yichunlin09/pen/mdxLbWG?editors=0011)           |
| React-慧茹(拉拉醬)#3414 | [Codepen](https://codepen.io/lala-lee-jobs/pen/wvmjwLB?editors=1111)         |
|        威爾#1694        | [CodePen](https://codepen.io/WILL_Wu/pen/JjLvPqv)                            |
|       Yiling#4054       | [CodePen](https://codepen.io/lin010/pen/abYGoeY?editors=1011)                |
|        SHIN#6075        | [CodePen](https://codepen.io/shin9626/pen/rNdvNNG)                           |
|       Yukon#2618        | [CodePen](https://codepen.io/ukowork/pen/BarxBwE)                            |
|      ChloeLo#4858       | [CodePen](https://codepen.io/chloelo/pen/XWEqWRq)                            |
|      rainbow#3329       | [CodePen](https://codepen.io/g901612002/pen/poLVoMV?editors=1011)            |
|      LinaChen#1796      | [CodePen](https://codepen.io/LinaChen/pen/vYRjBXj)                           |
|         hw#0715         | [Codepen](https://codepen.io/Lhwei/pen/XWEqJXQ)                              |
|      山貓(焜)#7041      | [Codepen](https://codepen.io/pen?template=LYdmERV)                           |
|        yuyu#6310        | [Codepen](https://codepen.io/yuyu0905/pen/WNzJbEy?editors=1011)              |
|        L0F0#8733        | [Codepen](https://codepen.io/l0f0/pen/RwMyNYZ?editors=0011)                  |
|     Vada Chen#2055      | [CodePen](https://codepen.io/vadachen/pen/rNdvayg?editors=0011)              |
|      Mr.Sean#3825       | [CodePen](https://codepen.io/sean_1215/pen/zYWjGLz)                          |
|      Tuhacrt#0008       | [Codepen](https://codepen.io/Tuhacrt/pen/ZExoGNK)                            |
|       Tsuei#9284        | [CodePen](https://codepen.io/AlbertoLL/pen/BarxNXa?editors=0001)             |
|        吉利#3810        | [codepen](https://codepen.io/gillianyy/pen/MWVGYrx?editors=1111)             |
|     座標33129#8748      | [CodePen](https://codepen.io/ad80352/pen/JjLvPGN?editors=1011)               |
|        Nico#8739        | [CodePen](https://codepen.io/Nicof2e/pen/QWmrjrg?editors=1011)                             |
|       Chelly#6129       | [CodePen](https://codepen.io/chellyhsu/pen/bGvMdQG)             |
|         翔#0859         | [CodePen](https://codepen.io/energy95272z/pen/oNqdbLj)                       |
|      YenYing#4029       | [CodePen](https://codepen.io/yenying0804/pen/LYdmGEY?editors=1011)           |
|       HedgehogKU        | [CodePen](https://codepen.io/hedgehogkucc/pen/gOezPvG?editors=1011)          |
|     Joechiboo#3960      | [CodePen](https://codepen.io/joe-chiboo/pen/yLKjeQW)                         |
|      MarsKuo#6015       | [CodePen](https://codepen.io/MarsKuo/pen/YzaLwgx)                            |
|        LEO#7779         | [CodePen](https://codepen.io/nekorice/pen/VwXxeEp)                           |
|   Midnightdinner#6220   | [CodePen](https://codepen.io/woowooyong/pen/jOzxqOo)                         |
|         JC#8658         | [Codepen](https://codepen.io/jcsamoyed/pen/XWEqdRj)                          |
|       easton#3863       | [Codepen](https://codepen.io/EastonIsCodingNow/pen/YzaLGwq)                  |
|      Stanley#2505       | [Codepen](https://codepen.io/bigbearada/pen/MWVGjJZ)                         |
|       Yihan#5560        | [Codepen](https://codepen.io/h513hh513h/pen/dymepKO?editors=0011)            |
|       Claire#2116       | [Codepen](https://codepen.io/claire-chang-the-bashful/pen/eYMrdXO)           |
|       Yanyan#3555       | [Codepen](https://codepen.io/wei-yi-lee/pen/PoReGxQ)                         |
|     hiYifang #0736      | [Codepen](https://codepen.io/hiYifang/pen/WNzJoJe)                           |
|        lingxuan         | [Codepen](https://codepen.io/lingxuan0618/pen/PoRebEV?editors=1111)          |
|       芝麻凜#1627       | [Codepen](https://codepen.io/bardkidd/pen/gOezLVN?editors=0011)              |
|         Wu#0167         | [Codepen](https://codepen.io/Xander0705/pen/vYRjKQE)                         |
|        niel#2413        | [Codepen](https://codepen.io/danielhsu/pen/eYMrgBe?editors=1011)             |
|       陳sam#9117        | [Codepen](https://codepen.io/euldpliv/pen/ExELZmR?editors=1111)              |
|     Murmurline#6969     | [Codepen](https://codepen.io/murmurline/pen/rNdvjzd)                         |
|      JimHwang#3594      | [Codepen](https://codepen.io/jimh1129/pen/gOezgQr?editors=1111)              |
|     Dylan_Lin#7320      | [Codepen](https://codepen.io/lin-dylan/pen/xxWWvaV?editors=1111)             |
|        Shau#6400        | [Codepen](https://codepen.io/shau-chen/pen/rNdvjPZ)                          |
|         GL#2256         | [Codepen](https://codepen.io/4genie/pen/dymeNxy?editors=0011)                |
|       Ryder#7398        | [Codepen](https://codepen.io/rider159159/pen/JjLvWaG)                        |
|       Kenge#3690        | [Codepen](https://codepen.io/pgkusn/pen/JjLvNKW)                             |
|   Carolkiki2003#7399    | [Codepen](https://codepen.io/wasfzuig/pen/KKoRmop)                           |
|       hungya#0773       | [Codepen](https://codepen.io/hungya777/pen/WNzJjJe?editors=1011)             |
|     kyle890721#1016     | [Codepen](https://codepen.io/KYLE890721/pen/dymeWxq)                         |
|      Timothy#5863       | [Codepen](https://codepen.io/timothy_hippo/pen/XWEqgBB?editors=1011)         |
|      Evileye#0666       | [Codepen](https://codepen.io/gn-lin/pen/qBoYXWe?editors=1111)                |
|      yoshidc#0455       | [Codepen](https://codepen.io/yoshiyyc/pen/qBoYVzz)                           |
|       huch09#1426       | [codepen](https://codepen.io/subarashii-huch09/pen/XWEqVoW?editors=1111)     |
|      IreneLee#7932      | [codepen](https://codepen.io/ntjtcxpt-the-animator/pen/ZExorGE?editors=1011) |
|        城堡#2126        | [Codepen](https://codepen.io/tthcastle/pen/WNzJMrm)                          |
|        無名#6427        | [Codepen](https://codepen.io/Nomoney/pen/WNzJMGW?editors=1011)               |
|       Overy#4545        | [Codepen](https://codepen.io/overy-tsai/pen/abYGqWp?editors=1111)            |
|     Alex Liao#8538      | [CodePen](https://codepen.io/alex0207s/pen/RwMyMaO)                          |
|      NinaKuo#3332       | [Codepen](https://codepen.io/ninakuo0814/pen/abYGYqa)                        |
|       Anson#3594        | [Codepen](https://codepen.io/huanmingchang/pen/dymemjE?editors=1011)         |
|    andersonshen#4675    | [Codepen](https://codepen.io/luxyenni-the-bold/pen/XWEqYwg)                  |
|     john21429n#9434     | [Codepen](https://codepen.io/john21429/pen/poLVZbR?editors=1111)             |
|       連小艾#0791       | [Codepen](https://codepen.io/bolaslien/pen/RwMyBYw?editors=0011)             |
|       灰塵貓#7994       | [Codepen](https://codepen.io/rjk66268/pen/OJvZoKZ?editors=1011)              |
|      kevinhes#2881      | [CodePen](https://codepen.io/kevinhes/pen/vYRjPKb?editors=1011)              |
|       yiwun#0953        | [CodePen](https://codepen.io/kagamiakira_IBUN/pen/OJvZGGQ?editors=1111)      |
|        𝔼.𝕎#4742         | [CodePen](https://codepen.io/kidult316/pen/PoRegvQ)                          |
|        shin#5792        | [CodePen](https://codepen.io/hah1030/pen/rNdvgWO?editors=1011)               |
|      JessSong#5050      | [CodePen](https://codepen.io/jssanji03/pen/PoRevaX)                          |
|      Pandaa #7740       | [CodePen](https://codepen.io/pandaachu/pen/QWmrRBL)                          |
|       Kelvin#3296       | [CodePen](https://codepen.io/kelvinchang/pen/eYMraKz)                        |
|  charlottelee849#0366   | [CodePen](https://codepen.io/charlotte-lee/pen/JjLvQGL?editors=1111)         |
|       Rikku#1756        | [CodePen](https://codepen.io/rikkubook/pen/XWEqLje?editors=1111)             |
|       ねこ*#9385        | [Codepan](https://codepen.io/kunpao0104/pen/RwMyXGa)                         |
|       紅豆豆#0518       | [Codepan](https://codepen.io/zoseqlpc/pen/WNzJVXz?editors=0011)              |
|        Wins#8457        | [Codepan](https://codepen.io/winszhuang/pen/KKoROBG?editors=1111)            |
|       YuZhun#1362       | [Codepan](https://codepen.io/danzhun/pen/MWVGNMd?editors=1011)               |
|        Neal#0665        | [Codepan](https://codepen.io/neallkf/pen/KKoePdY?editors=0011)               |
|       史蒂夫#5075       | [Codepan](https://codepen.io/TaroPanda/pen/vYRrBwz)                          |
|        薯餅#3581        | [Codepan](https://codepen.io/ColdingPoTaTo/pen/PoRawbW)                      |
|    Wendy Chnag#8310     | [Codepen](https://codepen.io/Zhangbun/pen/wvmXvYW)                           |
|        夕璇#5662        | [Codepen](https://codepen.io/SiShiuan/pen/bGvKdMJ)                           |
|       seijo#15852       | [Codepen](https://codepen.io/SeijoHuang/pen/eYMKpOg?editors=0011)            |
|     Robert Lo#9653      | [Codepen](https://codepen.io/Robert-Lo/pen/KKoedqN?editors=1111)             |
|          moitw          | [codepen](https://codepen.io/tsuifei/pen/wvmXMbj?editors=1011)               |
|       露易莎#7673       | [Codepen](https://codepen.io/louisa-lin/pen/VwXdjZB)                         |
|       眼睛 #0314        | [Codepen](https://codepen.io/thrizzacode/pen/WNzyGdM?editors=1111)           |
|       Morris#8755       | [Codepen](https://codepen.io/morrisss/pen/vYRrKZP?editors=1011)              |
|       wenyun#2362       | [Codepen](https://codepen.io/wenyuncc/pen/LYdrbVR?editors=0011)              |
|         YJ#1839         | [Codepen](https://codepen.io/cshjufxc/pen/mdxKOGj?editors=1011)              |
|       Doris#1140        | [Codepen](https://codepen.io/doris79588/pen/rNdKjLw)                         |
|       Shani#4593        | [Codepen](https://codepen.io/ShaniMa/pen/wvmXgeB)                            |
|       EvaLin#4546       | [Codepen](https://codepen.io/evalin0316/pen/xxWzgdW?editors=1111)            |
|     Emily Hsi #9066     | [Codepen](https://codepen.io/EmilyHsi/pen/GRxGryV)                           |
|       BEAN #8402        | [Codepen](https://codepen.io/Beanhuang/pen/eYMKvWP?editors=0011)             |
|       james#1443        | [Codepen](https://codepen.io/clothn0105700/pen/WNzypdM?editors=0011)         |
|         TedWang         | [Codepen](https://codepen.io/wangtaiyan/pen/xxWzLrN?editors=1111)            |
|      TaoDoris#5230      | [Codepen](https://codepen.io/taomaomao/pen/poLKdRE?editors=0011)             |
|        時雨#8837        | [Codepen](https://codepen.io/jjustin-35/pen/jOzKYpK)                         |
|        emma#3398        | [Codepen](https://codepen.io/itsems/pen/oNqyprL)                             |
|        喬喬#2824        | [Codepen](https://codepen.io/joanne-wei/pen/NWYzYaG?editors=1011)            |
|       Chaim#5739        | [Codepen](https://codepen.io/hgit915/pen/MWVXVoJ)                            |
|    真．穎旻粉撕#4995    | [Codepen](https://codepen.io/gbnbihif/pen/PoRaxXw)                           |
|       Mitour#0672       | [CodePen](https://codepen.io/mitour/pen/qBoKLXz?editors=0011)                |
|        zzly#9134        | [Codepen](https://codepen.io/ly00/pen/yLKEZLZ)                               |
|    RayRayHuang#1998     | [Codepen](https://codepen.io/hongrueihuang/pen/ZExRwOd)                      |
| Sabrina77#1675     | [Codepen](https://codepen.io/sabrina-huang/pen/QWmxRjV)                      |
| 阿暟     | [Codepen](https://codepen.io/patrickrrr007/pen/BarVEKL?editors=1011)                      |
| whatsupmm#6761 | [Codepen](https://codepen.io/meidada/pen/wvmXZaz?editors=1111) |
| Carol Li #2269| [Codepen](https://codepen.io/carolli834/pen/WNzyVxj?editors=1011) |
| Otis#8455 | [Codepen](https://codepen.io/humming74/pen/wvmxvEa?editors=1011) |
| Evachan#5729 | [Codepen](https://codepen.io/Eva-go/pen/xxWJbVm?editors=1011) |
| Ada | [Codepen](https://codepen.io/zggsoagv-the-scripter/pen/PoRarvq) |
|彼得#1923|[Codepen](https://codepen.io/shiou-ho/pen/VwXBWxE)|
|toshow#5609|[CodePen](https://codepen.io/toshow/pen/VwXBzYN)|c(https://codepen.io/johnny329/pen/WNzKZPm)|
|鮪杰寶貝|[codepan](https://codepen.io/wei-nie/pen/zYWLpZJ?editors=1011)|
|JimmyChang#5558c|[codepan](https://codepen.io/JimmyChangWenChi/pen/MWVBrEV?editors=1111)|
|KuoMin#4931|[codepan](https://codepen.io/KuoMin/pen/wvmxpxd?editors=1011)|
| 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/vYRajZY) |
| Li-Ninja#0471	 | [Codepen](https://codepen.io/li-ninja/pen/mdxjKWw?editors=1011) |
|minmin#8960| [codepen](https://codepen.io/minfan-chen/pen/poLZZWg?editors=1111)|
| 咻蹦#1526 | [CodePen](https://codepen.io/emmasyu/pen/abYKeOR)|
| Rocker#6235 | [CodePen](https://codepen.io/RockerLi/pen/PoRdWdg?editors=1111)|
| anby#7112 | [CodePen](https://codepen.io/andy-ch-bo-an/pen/vYRzeoe?editors=1111)|
|Louise|[Codepen](https://codepen.io/LouiseHuang/pen/GRxXxvX)|
|許揚民 Evan#4546|[Codepen](https://codepen.io/gitevanhsu/pen/GRxXBJx)|
|Cookie SSS#6991|[Codepen](https://codepen.io/sqhjikpa-the-selector/pen/jOzvKgd?editors=1111)|
| lloyd#8224 | [Codepen](https://codepen.io/thanatus25/pen/BarqyaX)|
|雪莉#4827 | [Codepen](https://codepen.io/utshang216/pen/XWExbeG?editors=1111)|
|Cherry ZY#4647|[CodePen](https://codepen.io/qoosdd89382/pen/JjLmJaJ?editors=0010)|
|Josh DB #3366|[CodePen](https://codepen.io/joshjong/pen/MWVPvBv)|
|小班 #3324|[CodePen](https://codepen.io/jlhung168/pen/GRxYYQN?editors=1111)|
|蘇蘇 #0426|[CodePen](https://codepen.io/sabine1123/pen/wvmYQzX)|
|鉛筆 #7763|[CodePen](https://codepen.io/zoeguava/pen/QWmZJYe)|
|魚魚 #1220|[CodePen](https://codepen.io/vkkkmkbv-the-selector/pen/yLKRrqM)|
|Mori#5582|[CodePen](https://codepen.io/flower9312/pen/NWYOQMG)|
|hsiuhsiu #7412|[CodePen](https://codepen.io/hsiuhsiu/pen/wvmQGyd?editors=1011)|
|kancheng#3915|[CodePen](https://codepen.io/kancheng/pen/RwMqXGJ?editors=1011)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/VwXqxQX?editors=1111)|
|Emily #3648  |[CodePen](https://codepen.io/flien/pen/NWYBYGV?editors=0011)|
|fannnny #7112  |[CodePen](https://codepen.io/fannyHO/pen/RwMvWPW?editors=0011)|
|Judy #7874|[Codepen](https://codepen.io/hsiaohan/pen/NWYQzPa?editors=0011)|
|SleepWalk#1635|[Codepen](https://codepen.io/arthurliinn/pen/JjvJbbM?editors=0011)|
|Eshiunm|[CodePen](https://codepen.io/Code-My/pen/wvZxVGO)|