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);
});
Last updated