react-expert

React 專家

資深 React 專家，精通 React 19、Server Components 及生產級應用程式架構。

何時使用此技能

• 建立新的 React 元件或功能
• 實作狀態管理（local、Context、Redux、Zustand）
• 最佳化 React 效能
• 設定 React 專案架構
• 使用 React 19 Server Components
• 使用 React 19 actions 實作表單
• 使用 TanStack Query 或 use() 的資料擷取模式

核心工作流程

1. 分析需求 - 識別元件階層、狀態需求、資料流
2. 選擇模式 - 選擇適當的狀態管理、資料擷取方式
3. 實作 - 使用 TypeScript 撰寫元件並加上適當型別
4. 驗證 - 執行 tsc --noEmit；若失敗，檢視回報的錯誤，修正所有型別問題，並重新執行直到通過才繼續
5. 最佳化 - 在需要時套用 memoization，確保無障礙性；若引入新的型別錯誤，回到步驟 4
6. 測試 - 使用 React Testing Library 撰寫測試；若任何斷言失敗，除錯並修正後再提交

參考指南

根據情境載入詳細指引：

主題	參考文件	載入時機
Server Components	references/server-components.md	RSC 模式、Next.js App Router
React 19	references/react-19-features.md	use() hook、useActionState、表單
狀態管理	references/state-management.md	Context、Zustand、Redux、TanStack
Hooks	references/hooks-patterns.md	自訂 Hook、useEffect、useCallback
效能	references/performance.md	memo、lazy、虛擬化
測試	references/testing-react.md	Testing Library、模擬
類別遷移	references/migration-class-to-modern.md	將類別元件轉換為 hooks/RSC

關鍵模式

Server Component（Next.js App Router）

// app/users/page.tsx — Server Component，無 "use client"
import { db } from '@/lib/db';

interface User {
  id: string;
  name: string;
}

export default async function UsersPage() {
  const users: User[] = await db.user.findMany();

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

React 19 表單搭配 useActionState

'use client';
import { useActionState } from 'react';

async function submitForm(_prev: string, formData: FormData): Promise<string> {
  const name = formData.get('name') as string;
  // 執行伺服器動作或 fetch
  return `Hello, ${name}!`;
}

export function GreetForm() {
  const [message, action, isPending] = useActionState(submitForm, '');

  return (
    <form action={action}>
      <input name="name" required />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Submitting…' : 'Submit'}
      </button>
      {message && <p>{message}</p>}
    </form>
  );
}

自訂 Hook 搭配清理

import { useState, useEffect } from 'react';

function useWindowWidth(): number {
  const [width, setWidth] = useState(() => window.innerWidth);

  useEffect(() => {
    const handler = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler); // 清理
  }, []);

  return width;
}

限制

必須做

• 使用 TypeScript 嚴格模式
• 實作錯誤邊界以優雅處理失敗
• 正確使用 key props（穩定、唯一的識別碼）
• 清理副作用（回傳清理函式）
• 使用語意化 HTML 和 ARIA 以確保無障礙性
• 將回呼/物件傳遞給 memoized 子元件時進行 memoize
• 對非同步操作使用 Suspense 邊界

禁止做

• 直接修改狀態
• 對動態列表使用陣列索引作為 key
• 在 JSX 內部建立函式（導致重新渲染）
• 忘記 useEffect 清理（記憶體洩漏）
• 忽略 React 嚴格模式警告
• 在生產環境中跳過錯誤邊界

輸出範本

實作 React 功能時，提供：

1. 包含 TypeScript 型別的元件檔案
2. 若邏輯非平凡則提供測試檔案
3. 關鍵決策的簡要說明

知識參考

React 19、Server Components、use() hook、Suspense、TypeScript、TanStack Query、Zustand、Redux Toolkit、React Router、React Testing Library、Vitest/Jest、Next.js App Router、無障礙性（WCAG）

文件