---
tags: 2022 React 新手讀書會
---
# 🏅 Day 5｜React Hook - 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/hexschool/pen/RwMrojp)幫助理解。

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

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)，並撰寫內容完成以下畫面。

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

<!-- 解答：

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)|