大概的 react render 基本原理與問題處理

[QzCurious]

什麼時候會 re-render

• state 更新 → re-render
• props 更新 → re-render
• parent re-render → re-render

如何避免 re-render

• 一個 component 避免有太多非相關的 state，可以適時拆分去其他 components
• 一個 component 的 props 若與上一次 render 時相同，react 便不會更新 DOM
  • React.memo
• 讓需要的 state 離該 component 越近越好
  • 比如說，如果 state 在 parent 層，當 state 被更新時，所有 parent 的其他 components 都會被 re-render

要做什麼

• [ ] 預計慢慢將 HeroProvider 拆解成多個 Provider 各司其職
• [ ] 熟悉系拆之後再討論用 context 的優缺、是否有更好的方案 (預計是用 zustand 或 jotia 取代)

[QzCurious]

useState 可以不用全部都放在同一個地方，每個 component 都可以有自己的 useState。全部都放在一起很容易造成過多多餘的 re-render，且增加程式碼回追的成本

HeroProvider 就是個可被拆分的 useState 大集合

https://github.com/DoubleTian-tw/pokemon-Gym/blob/7b4800469c7dbbcf2b6482d44610801880ebb7dd/src/components/Hero/useHeroContext.jsx#L17-L341

[QzCurious]

https://www.youtube.com/watch?v=NsFmOttIW9Y&ab_channel=JackHerrington

Jack 的這隻影片用很實際但又直觀的方式來看 re-render 的影響 (雖然我從來不記得他叫 Jack)

一些我覺得你多花點力氣也要看完(或看懂)的:

• 3:49 提到不要在 component 中定義 component，它有示範會有什麼問題也有提出該如何解決
• 10:53 Jack 提出的最佳解，一方面顧及可讀性，一方面將相關邏輯各自區分成獨立的 component，有興趣可以直接去他的 GitHub repo 看完整程式碼。這也有助於你理解或解決 #13

剛好之前有問到為什麼、什麼時候要導入 global state management library，6:41 以簡單又實際的範例演示如何使用 zustand 解決。當然，每個人遇到的狀況不一樣，不見得每每都要做效能最佳化，但把概念學起來，需要優化時我們才比較有解決方向