# React Development Patterns ## Overview Expert guide for building modern React 19 applications with new concurrent features, Server Components, Actions, and advanced patterns. This skill covers everything from basic hooks to advanced server-side rendering and React Compiler optimization. ## When to Use * Building React 19 components with TypeScript/JavaScript * Managing component state with useState and useReducer * Handling side effects with useEffect * Optimizing performance with useMemo and useCallback * Creating custom hooks for reusable logic * Implementing component composition patterns * Working with refs using useRef * Using React 19's new features (use(), useOptimistic, useFormStatus) * Implementing Server Components and Actions * Working with Suspense and concurrent rendering * Building forms with new form hooks ## Instructions 1. **Identify Component Type** : Determine if Server Component or Client Component is needed 2. **Start with Hooks** : Use appropriate hooks for state management and side effects 3. **Implement Component Logic** : Build component with proper TypeScript typing 4. **Add Event Handlers** : Create stable references with useCallback where needed 5. **Optimize Performance** : Use useMemo for expensive computations 6. **Handle Errors** : Implement error boundaries for graceful error handling 7. **Test Components** : Write unit tests with React Testing Library ## Examples ### Server Component with Client Interaction // Server Component (default) async function ProductPage({ id }: { id: string }) { const product = await db.product.findUnique({ where: { id } }); return (

{product.name}

); } // Client Component 'use client'; function AddToCartButton({ productId }: { productId: string }) { const [isPending, startTransition] = useTransition(); const handleAdd = () => { startTransition(async () => { await addToCart(productId); }); }; return ( ); } ## Constraints and Warnings * **Server vs Client** : Server Components cannot use hooks, event handlers, or browser APIs * **use() Hook** : Can only be called during render, not in callbacks or effects * **Server Actions** : Must include 'use server' directive at the top of the file * **State Mutations** : Never mutate state directly; always create new references * **Effect Dependencies** : Always include all dependencies in useEffect arrays * **Key Stability** : Use stable IDs for list keys, not array indices * **Memory Leaks** : Always clean up subscriptions and event listeners in useEffect ## Core Hooks Patterns ### useState - State Management Basic state declaration and updates: import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( ); } State with initializer function (expensive computation): const [state, setState] = useState(() => { const initialState = computeExpensiveValue(); return initialState; }); 多个状态变量：函数用户配置文件（）{ const [名称，setName] = useState(''); const [年龄，setAge] = useState(0); const [电子邮件，setEmail] = useState(''); 返回（ <表格> setName(e.target.value)} /> setAge(Number(e.target.value))} /> setEmail(e.target.value)} /> ）； } ### useEffect - 副作用清理的基本效果：从'react'导入{useEffect}；函数 ChatRoom({ roomId }: { roomId: string }) { 使用效果（（）=> { const 连接 = createConnection(roomId); 连接.connect(); // 清理函数返回（）=> { 连接.断开(); }; }, [房间ID]); // 依赖数组 return

已连接到 {roomId}

; } 具有多个依赖关系的效果：函数 ChatRoom({ roomId, serverUrl }: { roomId: string; serverUrl: string }) { 使用效果（（）=> { const 连接 = createConnection(serverUrl, roomId); 连接.connect(); return () => 连接.disconnect(); }, [roomId, serverUrl]); // 当任一更改时重新运行 return

欢迎来到 {roomId}

; } 订阅效果：函数状态栏（）{ const [isOnline, setIsOnline] = useState(true); 使用效果（（）=> { 函数句柄在线（）{ setIsOnline(true); } 函数handleOffline() { setIsOnline(假); } window.addEventListener('在线',handleOnline); window.addEventListener('离线',handleOffline); 返回（）=> { window.removeEventListener('在线',handleOnline); window.removeEventListener('offline',handleOffline); }; }, []); // 空数组 = 在挂载时运行一次返回

{是否在线？ '✅ 在线' : '❌ 已断开连接'}

; } ### useRef - 持久引用存储可变值而不重新渲染：从'react'导入{useRef}；函数定时器() { const IntervalRef = useRef(空); const startTimer = () => { IntervalRef.current = setInterval(() => { console.log('勾选'); }, 1000); }; const stopTimer = () => { if (intervalRef.current) { clearInterval(intervalRef.current); } }; 返回（ <> ）； } DOM 元素参考：函数文本输入（）{ const inputRef = useRef(null); const focusInput = () => { inputRef.current?.focus(); }; 返回（ <> ）； } ## 自定义 Hook 模式将可重用逻辑提取到自定义挂钩中： // useOnlineStatus.ts 从 'react' 导入 { useState, useEffect }; 导出函数 useOnlineStatus() { const [isOnline, setIsOnline] = useState(true); 使用效果（（）=> { 函数句柄在线（）{ setIsOnline(true); } 函数handleOffline() { setIsOnline(假); } window.addEventListener('在线',handleOnline); window.addEventListener('离线',handleOffline); 返回（）=> { window.removeEventListener('在线',handleOnline); window.removeEventListener('offline',handleOffline); }; }, []); 返回 isOnline; } // 在组件中的使用函数状态栏（）{ const isOnline = useOnlineStatus(); 返回

{是否在线？ '✅ 在线' : '❌ 已断开连接'}

; } 函数保存按钮() { const isOnline = useOnlineStatus(); 返回（ <按钮已禁用={!isOnline}> {在线？ '保存' : '重新连接...'} ）； } 带参数的自定义钩子： // useChatRoom.ts 从'react'导入{useEffect}；界面聊天选项{ 服务器网址：字符串；房间ID：字符串； } 导出函数 useChatRoom({ serverUrl, roomId }: ChatOptions) { 使用效果（（）=> { const 连接 = createConnection(serverUrl, roomId); 连接.connect(); return () => 连接.disconnect(); }, [serverUrl, roomId]); } // 用法函数 ChatRoom({ roomId }: { roomId: string }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useChatRoom({ serverUrl, roomId }); 返回（ <> setServerUrl(e.target.value)} />

欢迎来到{roomId}

）； } ## 组件组合模式 ### 道具和儿童带道具的基本组件：接口 ButtonProps { 变体？： '主要' | “次要”；尺寸？： 'sm' | 'md' | 'lg'; onClick?: () => void; 孩子：React.ReactNode； } 函数 Button({ 变体 = 'primary', size = 'md', onClick, Children }: ButtonProps) { 返回（ <按钮 className={`btn btn-${variant} btn-${size}`} onClick={onClick} > {孩子} ）； } 与孩子一起作文：接口 CardProps { 孩子：React.ReactNode；类名？：字符串； } 函数 Card({ 儿童, className = '' }: CardProps) { 返回（

{孩子}

）； } // 用法函数用户配置文件（）{ 返回（ <卡片>

无名氏

软件工程师

）； } ### 提升状态兄弟姐妹之间共享状态：函数父级（）{ const [activeIndex, setActiveIndex] = useState(0); 返回（ <> <面板 isActive={activeIndex === 0} onShow={() => setActiveIndex(0)} > 面板1内容 <面板 isActive={activeIndex === 1} onShow={() => setActiveIndex(1)} > 面板2内容）； } 接口PanelProps { 是否活跃：布尔值； onShow: () => 无效; 孩子：React.ReactNode； } 函数面板（{ isActive，onShow，children }：PanelProps）{ 返回（

{isActive &&

{children}

}

）； } ## 性能优化 ### 避免不必要的影响 ❌ 不好 - 对派生状态使用效果：函数 TodoList({ todos }: { todos: Todo[] }) { const [visibleTodos, setVisibleTodos] = useState([]); 使用效果（（）=> { setVisibleTodos(todos.filter(t => !t.completed)); }, [待办事项]); // 不必要的影响返回

{/* ... */}; } ✅ 好 - 渲染期间计算：函数 TodoList({ todos }: { todos: Todo[] }) { constvisibleTodos = todos.filter(t => !t.completed); // 直接计算返回

{/* ... */}; } ### useMemo 用于昂贵的计算从 'react' 导入 { useMemo } ；函数 DataTable({ 数据 }: { 数据: Item[] }) { const SortedData = useMemo(() => { return [...data].sort((a, b) => a.name.localeCompare(b.name)); }, [数据]); // 仅当数据改变时重新计算 return {/* 渲染sortedData */}

; } ### useCallback 保证函数稳定性从'react'导入{useCallback}；函数父级（）{ const [count, setCount] = useState(0); const handleClick = useCallback(() => { console.log('点击次数', 计数); }, [计数]); // 仅当计数改变时重新创建返回 ; } ## TypeScript 最佳实践 ### 类型安全的道具接口用户属性{ id：字符串；名称：字符串；电子邮件：字符串；年龄？：数字； // 可选 } 函数 User({ id, 姓名, 电子邮件, 年龄 }: UserProps) { 返回（

{名称}

{电子邮件}

{年龄&&

年龄：{年龄}

}

）； } ### 通用组件接口 ListProps { 项目：T[]； renderItem: (项目: T) => React.ReactNode; } 函数 List({ items, renderItem }: ListProps) { 返回（

{renderItem(item)}

）； } // 用法 <列表项目={用户} renderItem={(user) => {user.name}} /> ### 事件处理程序函数形式（）{ const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); // 处理表单提交 }; const handleChange = (e: React.ChangeEvent) => { console.log(e.target.value); }; 返回（

）； } ## 常见模式 ### 受控组件函数受控输入（）{ const [值，setValue] = useState(''); 返回（ <输入值={值} onChange={e => setValue(e.target.value)} /> ）； } ### 条件渲染函数问候语({ isLoggedIn }: { isLoggedIn: boolean }) { 返回（

{已登录？（ <用户问候语/> ) : ( <来宾问候/> )}

）； } ### 列表和键函数 UserList({ users }: { users: User[] }) { 返回（

{用户名}

）； } ## 最佳实践 ### 一般 React 最佳实践 1. **Dependency Arrays** : Always specify correct dependencies in useEffect 2. **State Structure** : Keep state minimal and avoid redundant state 3. **Component Size** : Keep components small and focused 4. **Custom Hooks** : Extract complex logic into reusable custom hooks 5. **TypeScript** : Use TypeScript for type safety 6. **Keys** : Use stable IDs as keys for list items, not array indices 7. **Immutability** : Never mutate state directly 8. **Effects** : Use effects only for synchronization with external systems 9. **Performance** : Profile before optimizing with useMemo/useCallback ### React 19 Specific Best Practices 1. **Server Components** : Use Server Components for data fetching and static content 2. **Client Components** : Mark components as 'use client' only when necessary 3. **Actions** : Use Server Actions for mutations and form submissions 4. **Optimistic Updates** : Implement useOptimistic for better UX 5. **use() Hook** : Use for reading promises and context conditionally 6. **Form State** : Use useFormState and useFormStatus for complex forms 7. **Concurrent Features** : Leverage useTransition for non-urgent updates 8. **Error Boundaries** : Implement proper error handling with error boundaries ## Common Pitfalls ### General React Pitfalls ❌ **Missing Dependencies** : useEffect(() => { // Uses 'count' but doesn't include it in deps console.log(count); }, []); // Wrong! ❌ **Mutating State** : const [items, setItems] = useState([]); items.push(newItem); // Wrong! Mutates state setItems(items); // Won't trigger re-render ✅ **Correct Approach** : setItems([...items, newItem]); // Create new array ### React 19 Specific Pitfalls ❌ **Using use() outside of render** : // Wrong! function handleClick() { const data = use(promise); // Error: use() can only be called in render } ✅ **Correct usage** : function Component({ promise }) { const data = use(promise); // Correct: called during render return

{data}

; } ❌ **Forgetting 'use server' directive** : // Wrong - missing 'use server' export async function myAction() { // This will run on the client! } ✅ **Correct Server Action** : 'use server'; // Must be at the top export async function myAction() { // Now runs on the server } ❌ **Mixing Server and Client logic incorrectly** : // Wrong - trying to use browser APIs in Server Component export default async function ServerComponent() { const width = window.innerWidth; // Error: window is not defined return

{width}

; } ✅ **Correct separation** : // Server Component for data export default async function ServerComponent() { const data = await fetchData(); return ; } // Client Component for browser APIs 'use client'; function ClientComponent({ data }) { const [width, setWidth] = useState(window.innerWidth); // Handle resize logic... return

{width}

; } ## React 19 New Features ### use() Hook - Reading Resources The `use()` hook reads the value from a resource like a Promise or Context: import { use } from 'react'; // Reading a Promise in a component function MessageComponent({ messagePromise }) { const message = use(messagePromise); return

{message}

; } // Reading Context conditionally function Button() { if (condition) { const theme = use(ThemeContext); return ; } return ; } ### useOptimistic Hook - Optimistic UI Updates 管理异步操作的乐观 UI 更新：从 'react' 导入 { useOptimistic } ；函数 TodoList({ todos, addTodo }) { const [optimisticTodos, addOptimisticTodo] = useOptimistic( 待办事项，（状态，newTodo）=> [...状态，newTodo] ）； const handleSubmit = async (formData) => { const newTodo = { id: Date.now(), text: formData.get('text') }; // 乐观地添加到UI addOptimisticTodo(newTodo); // 实际添加到后端等待 addTodo(newTodo); }; 返回（ <表单操作={handleSubmit}> {optimisticTodos.map(todo => (

{todo.text}

))} <输入类型=“文本”名称=“文本”/> ）； } ### useFormStatus Hook - 表单状态从子组件访问表单提交状态：从'react'导入{useFormStatus}；函数提交按钮() { const { 待处理，数据 } = useFormStatus(); 返回（ <按钮类型=“提交”禁用= {待处理}> {待定？ '正在提交...' : '提交'} ）； } 函数联系表（）{ 返回（ <表单操作={submitForm}> <输入名称=“电子邮件”类型=“电子邮件”/> <提交按钮/> ）； } ### useFormState Hook - 表单状态管理通过错误处理来管理表单状态：从'react'导入{useFormState}；异步函数submitAction(prevState: string | null, formData: FormData) { const email = formData.get('email') as string; if (!email.includes('@')) { 返回“无效的电子邮件地址”； } 等待提交数据库（电子邮件）；返回空值； } 函数电子邮件表单（）{ const [state, formAction] = useFormState(submitAction, null); 返回（ <表单操作={formAction}> <输入名称=“电子邮件”类型=“电子邮件”/> {状态 &&

{状态}

} ）； } ### 服务器操作定义用于表单处理的服务器端函数： // 应用程序/actions.ts '使用服务器'；从“下一步/导航”导入{重定向}；从'next/cache'导入{revalidatePath}；导出异步函数 createPost(formData: FormData) { const title = formData.get('title') as string; const content = formData.get('content') as string; // 验证输入 if (!标题 || !内容) { return { error: '标题和内容必填' }; } // 保存到数据库 const post = 等待 db.post.create({ 数据：{标题，内容} }); // 更新缓存并重定向 revalidatePath('/posts'); 重定向（`/posts/${post.id}`）； } ### 服务器组件专门在服务器上运行的组件： // app/posts/page.tsx - 服务器组件异步函数 PostsPage() { // 服务器端获取数据 const posts = 等待 db.post.findMany({ orderBy: { createAt: 'desc' }, 取：10 }); 返回（

{产品名称}

{产品.描述}

${产品.价格}

<数量选择器值={数量} onChange={设置数量} /> <添加到购物车按钮产品Id={产品.id} 数量={数量} onAdded={() => setIsAdded(true)} /> {isAdded &&

已添加到购物车！

}

）； } ### 带验证的服务器操作 '使用服务器'；从 'zod' 导入 { z }； const checkoutSchema = z.object({ 项目： z.array(z.object({ 产品ID: z.string(), 数量：z.number().min(1) }）），送货地址：z.object({ 街道：z.string().min(1), 城市: z.string().min(1), 邮政编码: z.string().regex(/^\d{5}$/) }), paymentMethod: z.enum(['credit', 'paypal', 'apple']) }); 导出异步函数 processCheckout( 上一个状态：任何，表单数据：表单数据）{ // 提取并验证数据常量原始数据 = { items: JSON.parse(formData.get('items') as string), 送货地址：{ 街道：formData.get('街道'), 城市：formData.get('城市'), 邮政编码：formData.get('邮政编码') }, 付款方式：formData.get('付款方式') }; const 结果 = checkoutSchema.safeParse(rawData); 如果（！结果。成功）{ 返回{ 错误：'验证失败'， fieldErrors: result.error.flatten().fieldErrors }; } 尝试{ // 处理付款 const order =等待createOrder(result.data); // 更新库存等待 updateInventory(结果.data.items); // 发送确认信息等待发送确认电子邮件（订单）； // 重新验证缓存 revalidatePath('/订单'); return { success: true, orderId: order.id }; } 捕获（错误）{ return { error: '支付失败' }; } } ## 并发特性 ### useTransition 用于非紧急更新从 'react' 导入 { useTransition, useState }; 函数 SearchableList({ items }: { items: Item[] }) { const [查询，setQuery] = useState(''); const [isPending, startTransition] = useTransition(); const [filteredItems, setFilteredItems] = useState(items); const handleChange = (e: React.ChangeEvent) => { // 立即更新输入 setQuery(e.target.value); // 转换过滤操作开始转换(() => { 设置过滤项（项目.过滤器（项目=> item.name.toLowerCase().includes(e.target.value.toLowerCase()) ））； }); }; 返回（

<输入类型=“文本” 值={查询} onChange={handleChange} placeholder="搜索项目..." /> {isPending &&

正在过滤...

}

{item.name}

）； } ### useDeferredValue 用于昂贵的 UI 从 'react' 导入 { useDeferredValue, useMemo }; 函数 DataGrid({ 数据 }: { 数据: DataRow[] }) { const [searchTerm, setSearchTerm] = useState(''); const deferredSearchTerm = useDeferredValue(searchTerm); const FilteredData = useMemo(() => { 返回数据.过滤器（行=> Object.values(行).some(值 => String(value).toLowerCase().includes(deferredSearchTerm.toLowerCase()) ））； }, [数据, deferredSearchTerm]); 返回（

<输入值={搜索项} onChange={e => setSearchTerm(e.target.value)} 占位符=“搜索...” 类名={searchTerm !== deferredSearchTerm ? '陈旧'：''} /> <数据网格行数据={过滤数据} isStale={searchTerm !== deferredSearchTerm} />

）； } ## 测试 React 19 功能 ### 测试服务器操作从'@testing-library/react'导入{渲染，屏幕，fireEvent}；从 '@jest/globals' 导入 { jest } ；从'./ContactForm'导入ContactForm； // 模拟服务器动作 const mockSubmitForm = jest.fn(); 描述（'联系表格'，（）=> { it('通过服务器操作提交表单', async () => { 渲染（）； fireEvent.change(screen.getByLabelText('电子邮件'), { 目标：{值：'test@example.com'} }); fireEvent.click(screen.getByText('提交')); 期望（mockSubmitForm）.toHaveBeenCalledWith（期望.any(FormData) ）； }); it('提交期间显示加载状态', async () => { mockSubmitForm.mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100))); 渲染（）； fireEvent.click(screen.getByText('提交')); Expect(screen.getByText('正在提交...')).toBeInTheDocument(); 等待 waitFor(() => { Expect(screen.getByText('提交')).toBeInTheDocument(); }); }); }); ### 测试乐观更新从 '@testing-library/react' 导入 { render, screen, fireEvent, waitFor }; 从 '@jest/globals' 导入 { jest } ；从 './TodoList' 导入 TodoList；描述('useOptimistic', () => { it('立即显示乐观更新', async () => { const mockAddTodo = jest.fn(() => new Promise(resolve => setTimeout(resolve, 100))); 渲染（ <待办事项列表待办事项={[]} addTodo={mockAddTodo} /> ）； fireEvent.change(screen.getByPlaceholderText('添加待办事项'), { 目标：{值：'新待办事项'} }); fireEvent.click(screen.getByText('添加')); // 乐观更新立即出现 Expect(screen.getByText('新待办事项')).toBeInTheDocument(); // 等待实际提交等待 waitFor(() => { 期望（mockAddTodo）.toHaveBeenCalledWith（{ id：expect.any（数字），文本：“新待办事项” }); }); }); }); ## 性能最佳实践 ### React 编译器指南 1. **编写标准 React 代码**：编译器最适合惯用的 React 模式 2. **避免手动 Memoization** ：让编译器处理 useMemo、useCallback 和 memo 3. **保持组件纯净**：避免渲染中的副作用 4. **使用稳定引用**：将稳定对象作为道具传递 // 好：干净、惯用的 React 函数 ProductCard({ 产品, onAddToCart }) { const [数量，设置数量] = useState(1); const handleAdd = () => { onAddToCart(产品.id, 数量); }; 返回（

{产品.名称}

${产品.价格}

<输入类型=“数字” 值={数量} onChange={e => setQuantity(Number(e.target.value))} 分钟=“1” />

）； } // 避免：手动优化函数 ProductCard({ 产品, onAddToCart }) { const [数量，设置数量] = useState(1); const handleAdd = useCallback(() => { onAddToCart(产品.id, 数量); }, [产品.id, 数量, onAddToCart]); 返回（

{产品.名称}

${产品.价格}

<数量输入值={数量} onChange={设置数量} />

）； } ### 服务器组件最佳实践 1. **保持服务器组件仅用于服务器**：没有事件处理程序、挂钩或浏览器 API 2. **最小化客户端组件**：仅在必要时使用“使用客户端” 3. **Pass Data as Props** ：从服务器传递到客户端时序列化数据 4. **Use Server Actions for Mutations** ：将数据操作保留在服务器上 // 好：静态内容的服务器组件异步函数 ProductPage({ id }: { id: string }) { const 产品 = 等待 fetchProduct(id); 返回（ <文章> <标题>

{产品名称}

{产品.描述}

<图片 src={产品.imageUrl} alt={产品名称} 宽度={600} 高度={400} /> ）； } // 客户端组件仅用于交互 '使用客户端'；函数 AddToCartForm({ 产品 ID }: { 产品 ID: 字符串 }) { const [isAdding, setIsAdding] = useState(false); 异步函数handleSubmit() { setIsAdding(true); 等待 addToCart(productId); setIsAdding(假); } 返回（ <表单操作={handleSubmit}> <按钮类型=“提交”禁用= {isAdding}> {正在添加？ '添加...' : '添加到购物车'} ）； } ## 迁移指南 ### 从 React 18 到 19 1. **更新依赖关系**： npm安装react@19react-dom@19 2. **采用服务器组件**： * 识别数据获取组件 * 从服务器组件中删除客户端代码 * 在需要的地方添加“使用客户端”指令 3. **替换手动乐观更新**： // 之前函数 TodoList({ todos, addTodo }) { const [optimisticTodos, setOptimisticTodos] = useState(todos); const handleAdd = async (text) => { const newTodo = { id: Date.now(), text }; setOptimisticTodos([...optimisticTodos, newTodo]); 等待 addTodo(newTodo); }; } // 之后函数 TodoList({ todos, addTodo }) { const [optimisticTodos, addOptimisticTodo] = useOptimistic( 待办事项，（状态，newTodo）=> [...状态，newTodo] ）； const handleAdd = async (formData) => { const newTodo = { id: Date.now(), text: formData.get('text') }; addOptimisticTodo(newTodo); 等待 addTodo(newTodo); }; } 4. **启用 React 编译器** : * 安装babel-plugin-react-compiler * 删除手动记忆 * 让编译器自动优化 ## 参考文献 * React 19 官方文档： * React 服务器组件： * React 编译器： * TypeScript 与 React：

{product.name}

欢迎来到 {roomId}

{是否在线？ '✅ 在线' : '❌ 已断开连接'}

{是否在线？ '✅ 在线' : '❌ 已断开连接'}

欢迎来到{roomId}

无名氏

{名称}

最新帖子

{产品名称}

{产品.名称}

{产品.名称}

{产品名称}

反应模式

包含技能