第二組讀書會 5-4~5-5

[amelie314]

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

🔗 簡報連結

🔗 延伸補充：比较 | React Query vs SWR vs Apollo vs RTK Query vs React Router

導讀人： Wanye

筆記工： Amelie ＆ 共筆

5-4 Q&A

Q1：為什麼在 react18 的嚴格模式且為開發環境的版本中 component 的 effect 函式會在 mount 時自動被執行兩次?

Mi：因為嚴格模式的功能，啟動嚴格模式＋開發環境版本下才會如此。這樣檢查的目的：可提前發生一些問題
Var：檢查副作用的設計

導讀人：與Mi理解是一樣的。為了去檢查effect函式是否重複幾次都能達到一樣的結果

Q2：Reusable state是什麼?為了滿足 reusable state 對於程式碼彈 性的要求，我們應該要讓副作用的設計滿足什麼目標?

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

5-5 Q&A

Q1：我們要如何解決副作用設計中「疊加性質而非覆蓋性質的操作」的問題?

Cheryl：要設計一個 cleanup 函式，疊加性質：指本身的副作用，比如說同樣的變數取代前一個（可覆蓋掉）就不算是疊加，如果是導讀人舉例的SetTimeout會疊加（會一直存在），導致產生memory leak

Q2：我們如何解決副作用設計中「race condition」的問題?

LJBL(小白)：跟前面那題很像，可用cleanup 函式處理，或是像書中所提到的第三方套件。
利用 cleanup fn 來立 flag ，類似註解的方式，利用判斷式來決定是否更新此筆資料。就可以避開 race condition 、舊資料覆蓋到新資料的不預期問題。

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

Q3：我們如何解決「memory leak」的問題?

Monica：如果沒有清除舊的監聽/訂閱事件，瀏覽器會持續監聽/訂閱。記得要清除！

額外ＱＡ環節

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 執行。

abort 實務分享
Sam：用第三方套件用得很熟練了，目前沒用 abort
Lois：在工作上有實際用到，https://axios-http.com/docs/cancellation
但 ⚡ 先注意公司使用的版本是多少⚡ BTW React Hook Form 也有遇到版本上的問題，記得多留意。

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