# 優化 React Re-render 的三大方式 - ThisWeb Kun

{%hackmd @JSDC2024/tsbu7yyvRJuYDgOZyikbHQ %}

Slido：
https://app.sli.do/event/jWzeqqoWEXfSPrMN4VeWmA
> 開始做筆記

## 狀態下移（State Down）

* 將 **state 狀態下放到真正需要更新的子元件**，可避免不必要的重新渲染。
* 這樣可以讓父層元件在更新時，不影響不相關的子元件，**提升整體效能與回應速度**。

## 記憶化（Memoization）

### 🔹 `useMemo` / `useCallback`

* JavaScript 中有兩種資料型別：

* 原始型別（Primitive）：如 string、number、boolean…
* 參考型別（Reference）：如 object、array、function…

* 在 React 中，**參考型別每次 render 都會重新建立記憶體位置**，即使內容相同，也會導致元件重新渲染。

* ✅ 解法：

* 使用 `useMemo` 來記憶化複雜計算結果或 JSX。
* 使用 `useCallback` 來記憶化函式，避免因 props 傳遞函式導致子元件重渲染。
* 特別是在函式作為 `props` 傳遞，或作為 `useEffect` 的依賴時，更應使用 `useCallback`。

## `memo` 高階元件（HOC）

* 使用 `React.memo(Component)` 可避免 props 沒變時的重渲染。
* 它會自動比較傳入的 `props` 是否相同（shallow comparison）。

### 注意事項

* 如果將 `children` 傳給子元件，它是以 **object（參考型別）** 傳入，每次 render 都會是新的參考。
* 因此即使內容沒變，也會觸發子元件重新渲染。
* ✅ 解法：可以使用 `useMemo` 包裝 JSX，如：

const memoizedChild = useMemo(() => <p>Child</p>, []);