react-patterns

此技能為採用 React 19 功能的現代 Web 應用程序提供了一個結構化框架。它專為需要維護高性能、可維護代碼庫並同時利用最新 React 生態系統進展的前端開發人員和軟體工程師而設計。該技能指導用戶通過 React Compiler 優化組件渲染路徑、管理副作用，並在不同的狀態同步策略之間做出決策。

• React Compiler 優化：識別純組件、可序列化 props 的模式，並透過 DevTools 驗證確保正確的記憶化（memoization）。

• Server Actions 與表單：利用現代 React 19 API（包括 useActionState 和 useOptimistic）促進以表單為中心的變更處理，並獲得即時的 UI 反饋。

• 數據獲取與 Hooks：提供用於處理 Promises 和 Context 的新 'use' hook 實現模式，同時區分 RSC (React Server Components) 與僅限 SPA 的模式。

• 變更策略：針對簡單的 CRUD 操作與 TanStack Query (useMutation) 複雜的依賴緩存的 SPA 變更之間提供指導。

• 輸入包括 TypeScript/React 項目中的組件文件、API 變更需求與現有的數據獲取邏輯。

• 輸出包含重構後的組件、優化的渲染邏輯、配置好的表單處理程序與改進的緩存失效流程。

• 實際限制：強調避免在 React Actions 與 TanStack Query 之間重複邏輯；需要 React 19 兼容性；假設熟悉標準 React 生命周期模式。

• 最佳實踐：優先考慮 React Compiler 的行內事件處理程序，嚴格遵循純函數原則，並在利用 'use' hook 處理數據流時善用 Suspense 邊界。