React 優化

---

Component Memoization

• 透過 useMemo、useCallback 減少資料的重複計算和創建。

• React.memo 也可以包裝整個 function component，在 props 不變時跳過 re-render。

---

Lazy Loading

• 透過 React.lazy 與 Suspense 實作。

• lazy: 當組件需要時才被加載進來，減少初始打包體積。

• suspense: 處理加載中的組件狀態，常搭配 loading spinner 或 skeleton。

---

Server Side Cache

• 將 API 的快取透過 key 或 payload 做為參數儲存 response。

• 在短期反覆切換的情況下，減少重複打 API 的次數。

• 常用工具：RTK Query、React Query。

• 可以搭配 Stale-While-Revalidate（SWV）策略，讓資料快速返回又能保持更新。

---

Reselect Selector

• 在 selector 中計算整理資料。

• 利用 Reselect 的 memoization 機制記憶計算結果。

• 減少在 component 中重複計算、減少不必要的 re-render。

---

Event Handling

• Throttle：在一段時間內只執行一次觸發事件的回調。

  • 使用情境：infinite scroll、scroll 監聽、拖曳拖拉。

• Debounce：將多次操作優化為只在最後一次執行。

  • 使用情境：輸入框即時推薦（如搜尋框）、resize 事件。

---

Virtualized Lists

• 只渲染可見範圍的元素，未出現的元素不渲染。

• 代表性工具：react-window、react-virtualized。

• 解決列表太長造成的性能瓶頸。

---

React Profiler

• 透過 React DevTools 中的 Profiler 插件，檢查 render 的時間、頻率。

• 找出效能瓶頸是哪個 component。

---

Code Splitting

• 透過 import() 動態載入模組，達成按需載入。

• 避免一開始就下載所有 JavaScript，讓初始渲染更快。

• 常搭配 React.lazy、Loadable Components 等工具。

---

Avoid Anonymous Functions in JSX

• 每次渲染都會產生新的匿名 function，導致子元件無法 memo 成功。

• 儘量將 function 提升出來或使用 useCallback 綁定。

---

Avoid Unnecessary State

• 不要把可以從 props 推導的資料存成 state。

• 減少不必要的 re-render 和維護複雜度。

---

Use Transition (Concurrent Features)

• 透過 useTransition 將不急迫的更新標記為「非緊急」，讓 React 可以優先處理用戶輸入等重要任務。

• 適合用在過濾清單、大量資料渲染等情境。

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setFilteredList(newList);
});