# React Compiler 正式發佈！一次了解你需要知道的全部重點 - Zet

{%hackmd @JSDC-tw/B1loEcwJZl %}
###### tags: `JSDC2025`

投影片：https://slides.com/tz5514/jsdc2025-react-compiler
Slido：https://app.sli.do/event/qbi3TodxSegBUkdBsUg8ca

> 開始做筆記

**2025-10: 1.0 released!**

iCHEF 主任前端工程師
<React 思維進化>

# Why?

## Source-to-source compiler
- 同語言內替換部分程式碼的片段
- 分析，加料，變成另外一個形式
- e.q
- tsc -> js
- JSX Transformer
- transpiler
- 重複使用
- 自訂語法糖
- 靜態優化
- build time 分析 (本次主題)

### 極端 + 效能敏感
- 手動新增：memo(), useMemo, useCallback, 減少 re-render
- 母 component 更新時，子 Component 也會被 re-render
- Memoization 關係鏈維護複雜，有作可能比沒作差！

### useCallback demo
https://slides.com/tz5514/jsdc2025-react-compiler#/2/4

用 useCallback(fetchData) 根據 query 是否改變，再使用 useEffect(fetchData) 來決定是否要重新 request 請求

### memo demo
https://slides.com/tz5514/jsdc2025-react-compiler#/2/5

即使你包了 memo, 放入的 handler function 會重新建立也沒用

### useMemo demo
https://slides.com/tz5514/jsdc2025-react-compiler#/2/6

Array definition in Component will be always recreate as re-render triggered

https://slides.com/tz5514/jsdc2025-react-compiler#/2/7
inline function 永遠 trigger re-render

### After React Compiler
**產生的程式碼，沒有 useCallback + useMemo 等字眼！**

## History
https://slides.com/tz5514/jsdc2025-react-compiler#/3/1
本來有 Prepack, 但太多 template 是在 runtime 才決定
- Vue 有將 template 先寫死
- React 放到 function, 隨你放 condition

2021 React Forget (前身)
- By 黃玄
- 嘗試將 useMemo + useCallback 移除

2024 Introduce React Compiler

# Effect
- build time read Component + hook, 分析 data-flow 與 mutability, where to cache, what is dependencies

## 細粒度 memo
- 不再是整個 Component 的 memo
- 分析每一個可以做的 Component + variable, 自動判斷出找出依賴關係
- early return partial memo
- hook 不能使用 early return :cry:
- 1.0 推導 optional chaining + array index
- 根據 Component 的 Data - UI 關係切割成不同的 render 區塊
- 除了儲存資料，也儲存 render 結果
- compile 出簡單的 if else function 了
- 不再為了效能優化，犧牲可閱讀性
- 為了包 memo() 拆出
- ~~往後忘了 memo 吧~~

## Issues from Manual Manipulation
https://slides.com/tz5514/jsdc2025-react-compiler#/4/6/2
- 抓出人類無法判斷的地方
- 改善長期維護

# Support
- only `babel-plugin-react-compiler`
- `eslint-plugin-react-hooks` to fit compiler rules

# How to introduce
1. overrides Babel to folder scale
2. compilationMode : "annotation" -> "use memo"
3. "shouldUseCompiler" -> 2 versions
4. But bundle size increase ...
4. "use no memo" annotation
5. only for debug

https://slides.com/tz5514/jsdc2025-react-compiler#/6/7/2

> 聊天區

---

{%hackmd @JSDC-tw/jsdc2025_sponsor %}