# 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 的原因是因為：想在使用者操作畫面出事後，快速處理問題，避免收到投訴後被壓著處理