# React 優化實戰分析 - 掌握 React 進階技術 x 底層思維 - ThisWeb (Kun)

{%hackmd o8oUosN0QnqMSkF1_6kH7g %}

#### 📚 議程介紹

{%preview https://webconf.tw/agenda/32 %}

#### Kun 留言

簡報來了～！
https://webconf-2025.vercel.app/1

因為內容蠻多的，大家可以去 Presenter Mode 看講稿

然後其實怕時間來不及，講座被我砍掉一章節（雖然還是來不及ＸＤ）是新的 `<Activity />` 狀態保留的用法，我把它加回去了，大家可以參考一下。

也很推薦看一下最後我針對 React Compiler 在實際場景上的優化，今天講的有點趕，不然我覺得蠻精彩的ＸＤ

###### ▼▼▼ 開始筆記 ▼▼▼

從一個需求開始
要加一個顯示使用者資料的按鈕
但是複雜的組件會重新render
可以狀態下移，把state放在真正需要他的component
什麼時候可以用到狀態下移呢？
State如果只有少數組件使用的話，就可以考慮狀態下移

只要是原始值，大部分不用useＭemo
沒有依賴項就不用useCallback

什麼時候需要記憶化？
- 用在Hook的依賴陣裡
- 你確定某運算成本高昂
- 子元件被React.memo包住了

要不要使用useMemo or useCallback，要從primitive & reference的觀念出發

### React.

組件的記憶化
- react提供的高階元件
- 記憶化整個組件
- 根據props是否改變，決定是否跳過re-render
- 不要直接寫inline object or function 給React.memo的Props

### React.compiler
直接放上講者文章 [React Compiler 是什麼？實際應用與表現全解析](https://www.thisweb.dev/post/how-react-compiler-perfomrs-on-real-code)

### 相關 reference
很堆這篇文 [React re-renders guide: everything, all at once](https://www.developerway.com/posts/react-re-renders-guide#part1.1)

覺得跟今天講者講的有 85% 像，推推，裡面也有提到避免 re-render 的方法
還有 useMemo, useCallback 大部分是多餘的觀點

另外 blog 作者還有在 YT 出一系列貓貓解釋 React 底層概念，非常好理解也推一下
[Advanced React course](https://www.youtube.com/playlist?list=PL6dw1BPCcLC4n-4o-t1kQZH0NJeZtpmGp)

---
#### 聊天區...

大家有用到19版記得要升版喔⋯⋯
> 幸好我用18....
> 還好我用vue
> 最近 React 多災多難
> Vue在背後笑而不語
> vue不會有這些問題嗎？

希望講師可以提供ppt，感謝🙏
同求PPT

謝謝提供reference