---
# System prepended metadata

title: Tech Book Community - React 思維進化 5-4 & 5-5
tags: [React]

---

# 5-4 React 18 的 effect 函式在 mount 時為何會執行兩次？ </br> 5-5 副作用處理的常見情境設計技巧

:::info
## 🔗 [簡報連結](https://www.canva.com/design/DAGILMO4lWQ/mwA-UVmEbxD65hpC-HBV-g/edit?utm_content=DAGILMO4lWQ&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton)
## 🔗 [延伸補充：比较 | React Query vs SWR vs Apollo vs RTK Query vs React Router](https://cangsdarm.github.io/react-query-web-i18n/react/getstarted/comparison/)
## 導讀人： Wanye
## 筆記工： Amelie ＆ 共筆
:::

### 5-4 Q&A

:::success
#### Q1：為什麼在 react18 的嚴格模式且為開發環境的版本中 component 的 effect 函式會在 mount 時自動被執行兩次?
:::
Mi：因為嚴格模式的功能，啟動嚴格模式＋開發環境版本下才會如此。這樣檢查的目的：可提前發生一些問題
Var：檢查副作用的設計


導讀人：與Mi理解是一樣的。為了去檢查effect函式是否重複幾次都能達到一樣的結果
:::success
#### Q2：Reusable  state是什麼?為了滿足 reusable  state 對於程式碼彈 性的要求，我們應該要讓副作用的設計滿足什麼目標?
:::


Sam（=HLTVProxy=組長）：確保狀態和DOMElement能保持住，不要放入不必要的 dependency
導讀人：與 Sam 理解是一樣的。



### 5-5 Q&A
:::success
#### Q1：我們要如何解決副作用設計中「疊加性質而非覆蓋性質的操作」的問題?
:::
Cheryl：要設計一個 cleanup 函式，疊加性質：指本身的副作用，比如說同樣的變數取代前一個（可覆蓋掉）就不算是疊加，如果是導讀人舉例的SetTimeout會疊加（會一直存在），導致產生memory leak
:::success
#### Q2：我們如何解決副作用設計中「race condition」的問題?
:::
LJBL(小白)：跟前面那題很像，可用cleanup 函式處理，或是像書中所提到的第三方套件。

利用 cleanup fn 來立 flag ，類似註解的方式，利用判斷式來決定是否更新此筆資料。就可以避開 race condition 、舊資料覆蓋到新資料的不預期問題。

在執行下一次前先clean掉，就不會走到那一步，永遠都能如預期得到結果。

:::success
#### Q3：我們如何解決「memory leak」的問題?
:::
Monica：如果沒有清除舊的監聽/訂閱事件，瀏覽器會持續監聽/訂閱。記得要清除！

### 額外ＱＡ環節
:::warning
5-5-1投影片
:::
Cheyl：詢問為什麼正常預期的行為
誤以為第一次請求率先回應這裡是不是 setUserData 有成功執行 userID 為 1 的資料，後面才被第二次 render 的 setUserData 的 userID 為2 的資料覆蓋掉?

Wanye 回覆：在父層被觸發 re-render 要執行第二次 useEffect 要 fetchUserData(userId:2) 的資料前，就會執行第一次 cleanup function，就會把 ignoreResult 改為 true，第一次的 fetchUserData(1) 就不會被 setUserData 執行。

:::warning
abort 實務分享
:::
Sam：用第三方套件用得很熟練了，目前沒用 abort

Lois：在工作上有實際用到，https://axios-http.com/docs/cancellation
但 ⚡ 先注意公司使用的版本是多少⚡ BTW [React Hook Form](https://react-hook-form.com/) 也有遇到版本上的問題，記得多留意。
:::warning
Sentry
:::
Jason Huang —  21:48
昨天 Summer 提到的 Sentry (front-end monitoring) A_A

Amelie —  21:50
請教～ @Jason Huang ＠HLTVProxy 
Sentry 跟這次5-4 &-5-5 也有關係嗎？

HLTVProxy — 21:51
可邊看書籍 p.349，但是 Sentry 是用全局變數去包。
非用 useEffect 的方式去引入。
https://docs.expo.dev/guides/using-sentry/#initialize-sentry


Lois（羅伊絲） — 21:52
https://docs.sentry.io/platforms/javascript/guides/react/

Jason Huang — 21:54
我會想了解 Sentry 的原因是因為：想在使用者操作畫面出事後，快速處理問題，避免收到投訴後被壓著處理

