[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6PDZXXE4RRAVMJB5JH8S7B7":3,"skill-same:01M6PDZXXE4RRAVMJB5JH8S7B7":102},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":29,"publishedAt":50,"linkOnly":51,"markdownContent":52,"markdownBody":53,"frontMatter":54,"refName":72,"commitSha":73,"skillDirectory":74,"forksCount":14,"repositoryHtmlUrl":75,"repositoryHomepageUrl":6,"ownerHtmlUrl":76,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":77,"install":78,"resources":91},"01M6PDZXXE4RRAVMJB5JH8S7B7","react-patterns",null,"Comprehensive React 19 patterns expert covering Server Components, Actions, use() hook, useOptimistic, useFormStatus, useFormState, React Compiler, concurrent features, Suspense, and modern TypeScript development. Proactively use for any React development, component architecture, state management, performance optimization, or when implementing React 19's latest features.","castle-x\u002Fsonar","castle-x","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F68362913?v=4","01M6PDKZEWWT760P3FFZZQ42SD","castlexu","01M6PDKZJTJXTRH54309WXD6YR",0,"MIT","https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Freact-patterns\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",[30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49],"react","patterns","react patterns","implementing","testing","Server Components","react 19","expert","tsx","hooks","read","Bash","actions","server","component architecture","architecture","component","components","performance","frontend","2026-11-10 10:12:30",false,"---\nname: react-patterns\nversion: 2.0.0\ndescription: Comprehensive React 19 patterns expert covering Server Components, Actions, use() hook, useOptimistic, useFormStatus, useFormState, React Compiler, concurrent features, Suspense, and modern TypeScript development. Proactively use for any React development, component architecture, state management, performance optimization, or when implementing React 19's latest features.\nlanguage: typescript,javascript,tsx,jsx\nframework: react\nlicense: MIT\nallowed-tools: Read, Write, Edit, Bash, Grep, Glob\ntags: [react, react-19, typescript, javascript, jsx, tsx, hooks, server-components, actions, suspense, concurrent-rendering, react-compiler, use-optimistic, form-actions]\ncategory: frontend\nsubcategories: [components, hooks, state-management, performance, server-components, forms, testing]\n---\n\n# React Development Patterns\n\nExpert guide for building modern React 19 applications with new concurrent features, Server Components, Actions, and advanced patterns.\n\n## When to Use\n\n- Building React 19 components with TypeScript\u002FJavaScript\n- Managing component state with useState and useReducer\n- Handling side effects with useEffect\n- Optimizing performance with useMemo and useCallback\n- Creating custom hooks for reusable logic\n- Implementing component composition patterns\n- Working with refs using useRef\n- Using React 19's new features (use(), useOptimistic, useFormStatus)\n- Implementing Server Components and Actions\n- Working with Suspense and concurrent rendering\n- Building forms with new form hooks\n\n## Core Hooks Patterns\n\n### useState - State Management\n\nBasic state declaration and updates:\n\n```typescript\nimport { useState } from 'react';\n\nfunction Counter() {\n const [count, setCount] = useState(0);\n \n return (\n \u003Cbutton onClick={() => setCount(count + 1)}>\n Count: {count}\n \u003C\u002Fbutton>\n );\n}\n```\n\nState with initializer function (expensive computation):\n\n```typescript\nconst [state, setState] = useState(() => {\n const initialState = computeExpensiveValue();\n return initialState;\n});\n```\n\nMultiple state variables:\n\n```typescript\nfunction UserProfile() {\n const [name, setName] = useState('');\n const [age, setAge] = useState(0);\n const [email, setEmail] = useState('');\n \n return (\n \u003Cform>\n \u003Cinput value={name} onChange={e => setName(e.target.value)} \u002F>\n \u003Cinput type=\"number\" value={age} onChange={e => setAge(Number(e.target.value))} \u002F>\n \u003Cinput type=\"email\" value={email} onChange={e => setEmail(e.target.value)} \u002F>\n \u003C\u002Fform>\n );\n}\n```\n\n### useEffect - Side Effects\n\nBasic effect with cleanup:\n\n```typescript\nimport { useEffect } from 'react';\n\nfunction ChatRoom({ roomId }: { roomId: string }) {\n useEffect(() => {\n const connection = createConnection(roomId);\n connection.connect();\n \n \u002F\u002F Cleanup function\n return () => {\n connection.disconnect();\n };\n }, [roomId]); \u002F\u002F Dependency array\n \n return \u003Cdiv>Connected to {roomId}\u003C\u002Fdiv>;\n}\n```\n\nEffect with multiple dependencies:\n\n```typescript\nfunction ChatRoom({ roomId, serverUrl }: { roomId: string; serverUrl: string }) {\n useEffect(() => {\n const connection = createConnection(serverUrl, roomId);\n connection.connect();\n \n return () => connection.disconnect();\n }, [roomId, serverUrl]); \u002F\u002F Re-run when either changes\n \n return \u003Ch1>Welcome to {roomId}\u003C\u002Fh1>;\n}\n```\n\nEffect for subscriptions:\n\n```typescript\nfunction StatusBar() {\n const [isOnline, setIsOnline] = useState(true);\n \n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n \n function handleOffline() {\n setIsOnline(false);\n }\n \n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n \n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []); \u002F\u002F Empty array = run once on mount\n \n return \u003Ch1>{isOnline ? '✅ Online' : '❌ Disconnected'}\u003C\u002Fh1>;\n}\n```\n\n### useRef - Persistent References\n\nStoring mutable values without re-renders:\n\n```typescript\nimport { useRef } from 'react';\n\nfunction Timer() {\n const intervalRef = useRef\u003CNodeJS.Timeout | null>(null);\n \n const startTimer = () => {\n intervalRef.current = setInterval(() => {\n console.log('Tick');\n }, 1000);\n };\n \n const stopTimer = () => {\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n }\n };\n \n return (\n \u003C>\n \u003Cbutton onClick={startTimer}>Start\u003C\u002Fbutton>\n \u003Cbutton onClick={stopTimer}>Stop\u003C\u002Fbutton>\n \u003C\u002F>\n );\n}\n```\n\nDOM element references:\n\n```typescript\nfunction TextInput() {\n const inputRef = useRef\u003CHTMLInputElement>(null);\n \n const focusInput = () => {\n inputRef.current?.focus();\n };\n \n return (\n \u003C>\n \u003Cinput ref={inputRef} type=\"text\" \u002F>\n \u003Cbutton onClick={focusInput}>Focus Input\u003C\u002Fbutton>\n \u003C\u002F>\n );\n}\n```\n\n## Custom Hooks Pattern\n\nExtract reusable logic into custom hooks:\n\n```typescript\n\u002F\u002F useOnlineStatus.ts\nimport { useState, useEffect } from 'react';\n\nexport function useOnlineStatus() {\n const [isOnline, setIsOnline] = useState(true);\n \n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n \n function handleOffline() {\n setIsOnline(false);\n }\n \n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n \n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);\n \n return isOnline;\n}\n\n\u002F\u002F Usage in components\nfunction StatusBar() {\n const isOnline = useOnlineStatus();\n return \u003Ch1>{isOnline ? '✅ Online' : '❌ Disconnected'}\u003C\u002Fh1>;\n}\n\nfunction SaveButton() {\n const isOnline = useOnlineStatus();\n return (\n \u003Cbutton disabled={!isOnline}>\n {isOnline ? 'Save' : 'Reconnecting...'}\n \u003C\u002Fbutton>\n );\n}\n```\n\nCustom hook with parameters:\n\n```typescript\n\u002F\u002F useChatRoom.ts\nimport { useEffect } from 'react';\n\ninterface ChatOptions {\n serverUrl: string;\n roomId: string;\n}\n\nexport function useChatRoom({ serverUrl, roomId }: ChatOptions) {\n useEffect(() => {\n const connection = createConnection(serverUrl, roomId);\n connection.connect();\n \n return () => connection.disconnect();\n }, [serverUrl, roomId]);\n}\n\n\u002F\u002F Usage\nfunction ChatRoom({ roomId }: { roomId: string }) {\n const [serverUrl, setServerUrl] = useState('https:\u002F\u002Flocalhost:1234');\n \n useChatRoom({ serverUrl, roomId });\n \n return (\n \u003C>\n \u003Cinput value={serverUrl} onChange={e => setServerUrl(e.target.value)} \u002F>\n \u003Ch1>Welcome to {roomId}\u003C\u002Fh1>\n \u003C\u002F>\n );\n}\n```\n\n## Component Composition Patterns\n\n### Props and Children\n\nBasic component with props:\n\n```typescript\ninterface ButtonProps {\n variant?: 'primary' | 'secondary';\n size?: 'sm' | 'md' | 'lg';\n onClick?: () => void;\n children: React.ReactNode;\n}\n\nfunction Button({ variant = 'primary', size = 'md', onClick, children }: ButtonProps) {\n return (\n \u003Cbutton \n className={`btn btn-${variant} btn-${size}`}\n onClick={onClick}\n >\n {children}\n \u003C\u002Fbutton>\n );\n}\n```\n\nComposition with children:\n\n```typescript\ninterface CardProps {\n children: React.ReactNode;\n className?: string;\n}\n\nfunction Card({ children, className = '' }: CardProps) {\n return (\n \u003Cdiv className={`card ${className}`}>\n {children}\n \u003C\u002Fdiv>\n );\n}\n\n\u002F\u002F Usage\nfunction UserProfile() {\n return (\n \u003CCard>\n \u003Ch2>John Doe\u003C\u002Fh2>\n \u003Cp>Software Engineer\u003C\u002Fp>\n \u003C\u002FCard>\n );\n}\n```\n\n### Lifting State Up\n\nShared state between siblings:\n\n```typescript\nfunction Parent() {\n const [activeIndex, setActiveIndex] = useState(0);\n \n return (\n \u003C>\n \u003CPanel\n isActive={activeIndex === 0}\n onShow={() => setActiveIndex(0)}\n >\n Panel 1 content\n \u003C\u002FPanel>\n \u003CPanel\n isActive={activeIndex === 1}\n onShow={() => setActiveIndex(1)}\n >\n Panel 2 content\n \u003C\u002FPanel>\n \u003C\u002F>\n );\n}\n\ninterface PanelProps {\n isActive: boolean;\n onShow: () => void;\n children: React.ReactNode;\n}\n\nfunction Panel({ isActive, onShow, children }: PanelProps) {\n return (\n \u003Cdiv>\n \u003Cbutton onClick={onShow}>Show\u003C\u002Fbutton>\n {isActive && \u003Cdiv>{children}\u003C\u002Fdiv>}\n \u003C\u002Fdiv>\n );\n}\n```\n\n## Performance Optimization\n\n### Avoid Unnecessary Effects\n\n❌ Bad - Using effect for derived state:\n\n```typescript\nfunction TodoList({ todos }: { todos: Todo[] }) {\n const [visibleTodos, setVisibleTodos] = useState\u003CTodo[]>([]);\n \n useEffect(() => {\n setVisibleTodos(todos.filter(t => !t.completed));\n }, [todos]); \u002F\u002F Unnecessary effect\n \n return \u003Cul>{\u002F* ... *\u002F}\u003C\u002Ful>;\n}\n```\n\n✅ Good - Compute during render:\n\n```typescript\nfunction TodoList({ todos }: { todos: Todo[] }) {\n const visibleTodos = todos.filter(t => !t.completed); \u002F\u002F Direct computation\n \n return \u003Cul>{\u002F* ... *\u002F}\u003C\u002Ful>;\n}\n```\n\n### useMemo for Expensive Computations\n\n```typescript\nimport { useMemo } from 'react';\n\nfunction DataTable({ data }: { data: Item[] }) {\n const sortedData = useMemo(() => {\n return [...data].sort((a, b) => a.name.localeCompare(b.name));\n }, [data]); \u002F\u002F Only recompute when data changes\n \n return \u003Ctable>{\u002F* render sortedData *\u002F}\u003C\u002Ftable>;\n}\n```\n\n### useCallback for Function Stability\n\n```typescript\nimport { useCallback } from 'react';\n\nfunction Parent() {\n const [count, setCount] = useState(0);\n \n const handleClick = useCallback(() => {\n console.log('Clicked', count);\n }, [count]); \u002F\u002F Recreate only when count changes\n \n return \u003CExpensiveChild onClick={handleClick} \u002F>;\n}\n```\n\n## TypeScript Best Practices\n\n### Type-Safe Props\n\n```typescript\ninterface UserProps {\n id: string;\n name: string;\n email: string;\n age?: number; \u002F\u002F Optional\n}\n\nfunction User({ id, name, email, age }: UserProps) {\n return (\n \u003Cdiv>\n \u003Ch2>{name}\u003C\u002Fh2>\n \u003Cp>{email}\u003C\u002Fp>\n {age && \u003Cp>Age: {age}\u003C\u002Fp>}\n \u003C\u002Fdiv>\n );\n}\n```\n\n### Generic Components\n\n```typescript\ninterface ListProps\u003CT> {\n items: T[];\n renderItem: (item: T) => React.ReactNode;\n}\n\nfunction List\u003CT>({ items, renderItem }: ListProps\u003CT>) {\n return (\n \u003Cul>\n {items.map((item, index) => (\n \u003Cli key={index}>{renderItem(item)}\u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n );\n}\n\n\u002F\u002F Usage\n\u003CList \n items={users}\n renderItem={(user) => \u003Cspan>{user.name}\u003C\u002Fspan>}\n\u002F>\n```\n\n### Event Handlers\n\n```typescript\nfunction Form() {\n const handleSubmit = (e: React.FormEvent\u003CHTMLFormElement>) => {\n e.preventDefault();\n \u002F\u002F Handle form submission\n };\n \n const handleChange = (e: React.ChangeEvent\u003CHTMLInputElement>) => {\n console.log(e.target.value);\n };\n \n return (\n \u003Cform onSubmit={handleSubmit}>\n \u003Cinput onChange={handleChange} \u002F>\n \u003C\u002Fform>\n );\n}\n```\n\n## Common Patterns\n\n### Controlled Components\n\n```typescript\nfunction ControlledInput() {\n const [value, setValue] = useState('');\n \n return (\n \u003Cinput \n value={value}\n onChange={e => setValue(e.target.value)}\n \u002F>\n );\n}\n```\n\n### Conditional Rendering\n\n```typescript\nfunction Greeting({ isLoggedIn }: { isLoggedIn: boolean }) {\n return (\n \u003Cdiv>\n {isLoggedIn ? (\n \u003CUserGreeting \u002F>\n ) : (\n \u003CGuestGreeting \u002F>\n )}\n \u003C\u002Fdiv>\n );\n}\n```\n\n### Lists and Keys\n\n```typescript\nfunction UserList({ users }: { users: User[] }) {\n return (\n \u003Cul>\n {users.map(user => (\n \u003Cli key={user.id}>\n {user.name}\n \u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n );\n}\n```\n\n## Best Practices\n\n### General React Best Practices\n\n1. **Dependency Arrays**: Always specify correct dependencies in useEffect\n2. **State Structure**: Keep state minimal and avoid redundant state\n3. **Component Size**: Keep components small and focused\n4. **Custom Hooks**: Extract complex logic into reusable custom hooks\n5. **TypeScript**: Use TypeScript for type safety\n6. **Keys**: Use stable IDs as keys for list items, not array indices\n7. **Immutability**: Never mutate state directly\n8. **Effects**: Use effects only for synchronization with external systems\n9. **Performance**: Profile before optimizing with useMemo\u002FuseCallback\n\n### React 19 Specific Best Practices\n\n1. **Server Components**: Use Server Components for data fetching and static content\n2. **Client Components**: Mark components as 'use client' only when necessary\n3. **Actions**: Use Server Actions for mutations and form submissions\n4. **Optimistic Updates**: Implement useOptimistic for better UX\n5. **use() Hook**: Use for reading promises and context conditionally\n6. **Form State**: Use useFormState and useFormStatus for complex forms\n7. **Concurrent Features**: Leverage useTransition for non-urgent updates\n8. **Error Boundaries**: Implement proper error handling with error boundaries\n\n## Common Pitfalls\n\n### General React Pitfalls\n\n❌ **Missing Dependencies**:\n```typescript\nuseEffect(() => {\n \u002F\u002F Uses 'count' but doesn't include it in deps\n console.log(count);\n}, []); \u002F\u002F Wrong!\n```\n\n❌ **Mutating State**:\n```typescript\nconst [items, setItems] = useState([]);\nitems.push(newItem); \u002F\u002F Wrong! Mutates state\nsetItems(items); \u002F\u002F Won't trigger re-render\n```\n\n✅ **Correct Approach**:\n```typescript\nsetItems([...items, newItem]); \u002F\u002F Create new array\n```\n\n### React 19 Specific Pitfalls\n\n❌ **Using use() outside of render**:\n```typescript\n\u002F\u002F Wrong!\nfunction handleClick() {\n const data = use(promise); \u002F\u002F Error: use() can only be called in render\n}\n```\n\n✅ **Correct usage**:\n```tsx\nfunction Component({ promise }) {\n const data = use(promise); \u002F\u002F Correct: called during render\n return \u003Cdiv>{data}\u003C\u002Fdiv>;\n}\n```\n\n❌ **Forgetting 'use server' directive**:\n```typescript\n\u002F\u002F Wrong - missing 'use server'\nexport async function myAction() {\n \u002F\u002F This will run on the client!\n}\n```\n\n✅ **Correct Server Action**:\n```typescript\n'use server'; \u002F\u002F Must be at the top\n\nexport async function myAction() {\n \u002F\u002F Now runs on the server\n}\n```\n\n❌ **Mixing Server and Client logic incorrectly**:\n```tsx\n\u002F\u002F Wrong - trying to use browser APIs in Server Component\nexport default async function ServerComponent() {\n const width = window.innerWidth; \u002F\u002F Error: window is not defined\n return \u003Cdiv>{width}\u003C\u002Fdiv>;\n}\n```\n\n✅ **Correct separation**:\n```tsx\n\u002F\u002F Server Component for data\nexport default async function ServerComponent() {\n const data = await fetchData();\n return \u003CClientComponent data={data} \u002F>;\n}\n\n\u002F\u002F Client Component for browser APIs\n'use client';\n\nfunction ClientComponent({ data }) {\n const [width, setWidth] = useState(window.innerWidth);\n \u002F\u002F Handle resize logic...\n return \u003Cdiv>{width}\u003C\u002Fdiv>;\n}\n```\n\n## React 19 New Features\n\n### use() Hook - Reading Resources\n\nThe `use()` hook reads the value from a resource like a Promise or Context:\n\n```typescript\nimport { use } from 'react';\n\n\u002F\u002F Reading a Promise in a component\nfunction MessageComponent({ messagePromise }) {\n const message = use(messagePromise);\n return \u003Cp>{message}\u003C\u002Fp>;\n}\n\n\u002F\u002F Reading Context conditionally\nfunction Button() {\n if (condition) {\n const theme = use(ThemeContext);\n return \u003Cbutton className={theme}>Click\u003C\u002Fbutton>;\n }\n return \u003Cbutton>Click\u003C\u002Fbutton>;\n}\n```\n\n### useOptimistic Hook - Optimistic UI Updates\n\nManage optimistic UI updates for async operations:\n\n```typescript\nimport { useOptimistic } from 'react';\n\nfunction TodoList({ todos, addTodo }) {\n const [optimisticTodos, addOptimisticTodo] = useOptimistic(\n todos,\n (state, newTodo) => [...state, newTodo]\n );\n\n const handleSubmit = async (formData) => {\n const newTodo = { id: Date.now(), text: formData.get('text') };\n\n \u002F\u002F Optimistically add to UI\n addOptimisticTodo(newTodo);\n\n \u002F\u002F Actually add to backend\n await addTodo(newTodo);\n };\n\n return (\n \u003Cform action={handleSubmit}>\n {optimisticTodos.map(todo => (\n \u003Cdiv key={todo.id}>{todo.text}\u003C\u002Fdiv>\n ))}\n \u003Cinput type=\"text\" name=\"text\" \u002F>\n \u003Cbutton type=\"submit\">Add Todo\u003C\u002Fbutton>\n \u003C\u002Fform>\n );\n}\n```\n\n### useFormStatus Hook - Form State\n\nAccess form submission status from child components:\n\n```typescript\nimport { useFormStatus } from 'react';\n\nfunction SubmitButton() {\n const { pending, data } = useFormStatus();\n\n return (\n \u003Cbutton type=\"submit\" disabled={pending}>\n {pending ? 'Submitting...' : 'Submit'}\n \u003C\u002Fbutton>\n );\n}\n\nfunction ContactForm() {\n return (\n \u003Cform action={submitForm}>\n \u003Cinput name=\"email\" type=\"email\" \u002F>\n \u003CSubmitButton \u002F>\n \u003C\u002Fform>\n );\n}\n```\n\n### useFormState Hook - Form State Management\n\nManage form state with error handling:\n\n```typescript\nimport { useFormState } from 'react';\n\nasync function submitAction(prevState: string | null, formData: FormData) {\n const email = formData.get('email') as string;\n\n if (!email.includes('@')) {\n return 'Invalid email address';\n }\n\n await submitToDatabase(email);\n return null;\n}\n\nfunction EmailForm() {\n const [state, formAction] = useFormState(submitAction, null);\n\n return (\n \u003Cform action={formAction}>\n \u003Cinput name=\"email\" type=\"email\" \u002F>\n \u003Cbutton type=\"submit\">Subscribe\u003C\u002Fbutton>\n {state && \u003Cp className=\"error\">{state}\u003C\u002Fp>}\n \u003C\u002Fform>\n );\n}\n```\n\n### Server Actions\n\nDefine server-side functions for form handling:\n\n```typescript\n\u002F\u002F app\u002Factions.ts\n'use server';\n\nimport { redirect } from 'next\u002Fnavigation';\nimport { revalidatePath } from 'next\u002Fcache';\n\nexport async function createPost(formData: FormData) {\n const title = formData.get('title') as string;\n const content = formData.get('content') as string;\n\n \u002F\u002F Validate input\n if (!title || !content) {\n return { error: 'Title and content are required' };\n }\n\n \u002F\u002F Save to database\n const post = await db.post.create({\n data: { title, content }\n });\n\n \u002F\u002F Update cache and redirect\n revalidatePath('\u002Fposts');\n redirect(`\u002Fposts\u002F${post.id}`);\n}\n```\n\n### Server Components\n\nComponents that run exclusively on the server:\n\n```typescript\n\u002F\u002F app\u002Fposts\u002Fpage.tsx - Server Component\nasync function PostsPage() {\n \u002F\u002F Server-side data fetching\n const posts = await db.post.findMany({\n orderBy: { createdAt: 'desc' },\n take: 10\n });\n\n return (\n \u003Cdiv>\n \u003Ch1>Latest Posts\u003C\u002Fh1>\n \u003CPostsList posts={posts} \u002F>\n \u003C\u002Fdiv>\n );\n}\n\n\u002F\u002F Client Component for interactivity\n'use client';\n\nfunction PostsList({ posts }: { posts: Post[] }) {\n const [selectedId, setSelectedId] = useState\u003Cnumber | null>(null);\n\n return (\n \u003Cul>\n {posts.map(post => (\n \u003Cli\n key={post.id}\n onClick={() => setSelectedId(post.id)}\n className={selectedId === post.id ? 'selected' : ''}\n >\n {post.title}\n \u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n );\n}\n```\n\n## React Compiler\n\n### Automatic Optimization\n\nReact Compiler automatically optimizes your components:\n\n```typescript\n\u002F\u002F Before React Compiler - manual memoization needed\nconst ExpensiveComponent = memo(function ExpensiveComponent({\n data,\n onUpdate\n}) {\n const processedData = useMemo(() => {\n return data.map(item => ({\n ...item,\n computed: expensiveCalculation(item)\n }));\n }, [data]);\n\n const handleClick = useCallback((id) => {\n onUpdate(id);\n }, [onUpdate]);\n\n return (\n \u003Cdiv>\n {processedData.map(item => (\n \u003CItem\n key={item.id}\n item={item}\n onClick={handleClick}\n \u002F>\n ))}\n \u003C\u002Fdiv>\n );\n});\n\n\u002F\u002F After React Compiler - no manual optimization needed\nfunction ExpensiveComponent({ data, onUpdate }) {\n const processedData = data.map(item => ({\n ...item,\n computed: expensiveCalculation(item)\n }));\n\n const handleClick = (id) => {\n onUpdate(id);\n };\n\n return (\n \u003Cdiv>\n {processedData.map(item => (\n \u003CItem\n key={item.id}\n item={item}\n onClick={handleClick}\n \u002F>\n ))}\n \u003C\u002Fdiv>\n );\n}\n```\n\n### Installation and Setup\n\n```bash\n# Install React Compiler\nnpm install -D babel-plugin-react-compiler@latest\n\n# Install ESLint plugin for validation\nnpm install -D eslint-plugin-react-hooks@latest\n```\n\n```javascript\n\u002F\u002F babel.config.js\nmodule.exports = {\n plugins: [\n 'babel-plugin-react-compiler', \u002F\u002F Must run first!\n \u002F\u002F ... other plugins\n ],\n};\n```\n\n```javascript\n\u002F\u002F vite.config.js for Vite users\nimport { defineConfig } from 'vite';\nimport react from '@vitejs\u002Fplugin-react';\n\nexport default defineConfig({\n plugins: [\n react({\n babel: {\n plugins: ['babel-plugin-react-compiler'],\n },\n }),\n ],\n});\n```\n\n### Compiler Configuration\n\n```javascript\n\u002F\u002F babel.config.js with compiler options\nmodule.exports = {\n plugins: [\n [\n 'babel-plugin-react-compiler',\n {\n \u002F\u002F Enable compilation for specific files\n target: '18', \u002F\u002F or '19'\n \u002F\u002F Debug mode for development\n debug: process.env.NODE_ENV === 'development'\n }\n ],\n ],\n};\n\n\u002F\u002F Incremental adoption with overrides\nmodule.exports = {\n plugins: [],\n overrides: [\n {\n test: '.\u002Fsrc\u002Fcomponents\u002F**\u002F*.{js,jsx,ts,tsx}',\n plugins: ['babel-plugin-react-compiler']\n }\n ]\n};\n```\n\n## Advanced Server Components Patterns\n\n### Mixed Server\u002FClient Architecture\n\n```typescript\n\u002F\u002F Server Component for data fetching\nasync function ProductPage({ id }: { id: string }) {\n const product = await fetchProduct(id);\n const related = await fetchRelatedProducts(id);\n\n return (\n \u003Cdiv>\n \u003CProductDetails product={product} \u002F>\n \u003CProductGallery images={product.images} \u002F>\n \u003CRelatedProducts products={related} \u002F>\n \u003C\u002Fdiv>\n );\n}\n\n\u002F\u002F Client Component for interactivity\n'use client';\n\nfunction ProductDetails({ product }: { product: Product }) {\n const [quantity, setQuantity] = useState(1);\n const [isAdded, setIsAdded] = useState(false);\n\n return (\n \u003Cdiv>\n \u003Ch1>{product.name}\u003C\u002Fh1>\n \u003Cp>{product.description}\u003C\u002Fp>\n \u003Cp>${product.price}\u003C\u002Fp>\n\n \u003CQuantitySelector\n value={quantity}\n onChange={setQuantity}\n \u002F>\n\n \u003CAddToCartButton\n productId={product.id}\n quantity={quantity}\n onAdded={() => setIsAdded(true)}\n \u002F>\n\n {isAdded && \u003Cp>Added to cart!\u003C\u002Fp>}\n \u003C\u002Fdiv>\n );\n}\n```\n\n### Server Actions with Validation\n\n```typescript\n'use server';\n\nimport { z } from 'zod';\n\nconst checkoutSchema = z.object({\n items: z.array(z.object({\n productId: z.string(),\n quantity: z.number().min(1)\n })),\n shippingAddress: z.object({\n street: z.string().min(1),\n city: z.string().min(1),\n zipCode: z.string().regex(\u002F^\\d{5}$\u002F)\n }),\n paymentMethod: z.enum(['credit', 'paypal', 'apple'])\n});\n\nexport async function processCheckout(\n prevState: any,\n formData: FormData\n) {\n \u002F\u002F Extract and validate data\n const rawData = {\n items: JSON.parse(formData.get('items') as string),\n shippingAddress: {\n street: formData.get('street'),\n city: formData.get('city'),\n zipCode: formData.get('zipCode')\n },\n paymentMethod: formData.get('paymentMethod')\n };\n\n const result = checkoutSchema.safeParse(rawData);\n\n if (!result.success) {\n return {\n error: 'Validation failed',\n fieldErrors: result.error.flatten().fieldErrors\n };\n }\n\n try {\n \u002F\u002F Process payment\n const order = await createOrder(result.data);\n\n \u002F\u002F Update inventory\n await updateInventory(result.data.items);\n\n \u002F\u002F Send confirmation\n await sendConfirmationEmail(order);\n\n \u002F\u002F Revalidate cache\n revalidatePath('\u002Forders');\n\n return { success: true, orderId: order.id };\n } catch (error) {\n return { error: 'Payment failed' };\n }\n}\n```\n\n## Concurrent Features\n\n### useTransition for Non-Urgent Updates\n\n```typescript\nimport { useTransition, useState } from 'react';\n\nfunction SearchableList({ items }: { items: Item[] }) {\n const [query, setQuery] = useState('');\n const [isPending, startTransition] = useTransition();\n const [filteredItems, setFilteredItems] = useState(items);\n\n const handleChange = (e: React.ChangeEvent\u003CHTMLInputElement>) => {\n \u002F\u002F Update input immediately\n setQuery(e.target.value);\n\n \u002F\u002F Transition the filter operation\n startTransition(() => {\n setFilteredItems(\n items.filter(item =>\n item.name.toLowerCase().includes(e.target.value.toLowerCase())\n )\n );\n });\n };\n\n return (\n \u003Cdiv>\n \u003Cinput\n type=\"text\"\n value={query}\n onChange={handleChange}\n placeholder=\"Search items...\"\n \u002F>\n\n {isPending && \u003Cdiv className=\"loading\">Filtering...\u003C\u002Fdiv>}\n\n \u003Cul>\n {filteredItems.map(item => (\n \u003Cli key={item.id}>{item.name}\u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n );\n}\n```\n\n### useDeferredValue for Expensive UI\n\n```typescript\nimport { useDeferredValue, useMemo } from 'react';\n\nfunction DataGrid({ data }: { data: DataRow[] }) {\n const [searchTerm, setSearchTerm] = useState('');\n const deferredSearchTerm = useDeferredValue(searchTerm);\n\n const filteredData = useMemo(() => {\n return data.filter(row =>\n Object.values(row).some(value =>\n String(value).toLowerCase().includes(deferredSearchTerm.toLowerCase())\n )\n );\n }, [data, deferredSearchTerm]);\n\n return (\n \u003Cdiv>\n \u003Cinput\n value={searchTerm}\n onChange={e => setSearchTerm(e.target.value)}\n placeholder=\"Search...\"\n className={searchTerm !== deferredSearchTerm ? 'stale' : ''}\n \u002F>\n\n \u003CDataGridRows\n data={filteredData}\n isStale={searchTerm !== deferredSearchTerm}\n \u002F>\n \u003C\u002Fdiv>\n );\n}\n```\n\n## Testing React 19 Features\n\n### Testing Server Actions\n\n```typescript\nimport { render, screen, fireEvent } from '@testing-library\u002Freact';\nimport { jest } from '@jest\u002Fglobals';\nimport ContactForm from '.\u002FContactForm';\n\n\u002F\u002F Mock server action\nconst mockSubmitForm = jest.fn();\n\ndescribe('ContactForm', () => {\n it('submits form with server action', async () => {\n render(\u003CContactForm \u002F>);\n\n fireEvent.change(screen.getByLabelText('Email'), {\n target: { value: 'test@example.com' }\n });\n\n fireEvent.click(screen.getByText('Submit'));\n\n expect(mockSubmitForm).toHaveBeenCalledWith(\n expect.any(FormData)\n );\n });\n\n it('shows loading state during submission', async () => {\n mockSubmitForm.mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)));\n\n render(\u003CContactForm \u002F>);\n\n fireEvent.click(screen.getByText('Submit'));\n\n expect(screen.getByText('Submitting...')).toBeInTheDocument();\n\n await waitFor(() => {\n expect(screen.getByText('Submit')).toBeInTheDocument();\n });\n });\n});\n```\n\n### Testing Optimistic Updates\n\n```typescript\nimport { render, screen, fireEvent, waitFor } from '@testing-library\u002Freact';\nimport { jest } from '@jest\u002Fglobals';\nimport TodoList from '.\u002FTodoList';\n\ndescribe('useOptimistic', () => {\n it('shows optimistic update immediately', async () => {\n const mockAddTodo = jest.fn(() => new Promise(resolve => setTimeout(resolve, 100)));\n\n render(\n \u003CTodoList\n todos={[]}\n addTodo={mockAddTodo}\n \u002F>\n );\n\n fireEvent.change(screen.getByPlaceholderText('Add a todo'), {\n target: { value: 'New todo' }\n });\n\n fireEvent.click(screen.getByText('Add'));\n\n \u002F\u002F Optimistic update appears immediately\n expect(screen.getByText('New todo')).toBeInTheDocument();\n\n \u002F\u002F Wait for actual submission\n await waitFor(() => {\n expect(mockAddTodo).toHaveBeenCalledWith({\n id: expect.any(Number),\n text: 'New todo'\n });\n });\n });\n});\n```\n\n## Performance Best Practices\n\n### React Compiler Guidelines\n\n1. **Write Standard React Code**: The compiler works best with idiomatic React patterns\n2. **Avoid Manual Memoization**: Let the compiler handle useMemo, useCallback, and memo\n3. **Keep Components Pure**: Avoid side effects in render\n4. **Use Stable References**: Pass stable objects as props\n\n```typescript\n\u002F\u002F Good: Clean, idiomatic React\nfunction ProductCard({ product, onAddToCart }) {\n const [quantity, setQuantity] = useState(1);\n\n const handleAdd = () => {\n onAddToCart(product.id, quantity);\n };\n\n return (\n \u003Cdiv>\n \u003Ch3>{product.name}\u003C\u002Fh3>\n \u003Cp>${product.price}\u003C\u002Fp>\n \u003Cinput\n type=\"number\"\n value={quantity}\n onChange={e => setQuantity(Number(e.target.value))}\n min=\"1\"\n \u002F>\n \u003Cbutton onClick={handleAdd}>Add to Cart\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n}\n\n\u002F\u002F Avoid: Manual optimization\nfunction ProductCard({ product, onAddToCart }) {\n const [quantity, setQuantity] = useState(1);\n\n const handleAdd = useCallback(() => {\n onAddToCart(product.id, quantity);\n }, [product.id, quantity, onAddToCart]);\n\n return (\n \u003Cdiv>\n \u003Ch3>{product.name}\u003C\u002Fh3>\n \u003Cp>${product.price}\u003C\u002Fp>\n \u003CQuantityInput\n value={quantity}\n onChange={setQuantity}\n \u002F>\n \u003Cbutton onClick={handleAdd}>Add to Cart\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n}\n```\n\n### Server Components Best Practices\n\n1. **Keep Server Components Server-Only**: No event handlers, hooks, or browser APIs\n2. **Minimize Client Components**: Only use 'use client' when necessary\n3. **Pass Data as Props**: Serialize data when passing from Server to Client\n4. **Use Server Actions for Mutations**: Keep data operations on the server\n\n```typescript\n\u002F\u002F Good: Server Component for static content\nasync function ProductPage({ id }: { id: string }) {\n const product = await fetchProduct(id);\n\n return (\n \u003Carticle>\n \u003Cheader>\n \u003Ch1>{product.name}\u003C\u002Fh1>\n \u003Cp>{product.description}\u003C\u002Fp>\n \u003C\u002Fheader>\n\n \u003Cimg\n src={product.imageUrl}\n alt={product.name}\n width={600}\n height={400}\n \u002F>\n\n \u003CPriceDisplay price={product.price} \u002F>\n \u003CAddToCartForm productId={product.id} \u002F>\n \u003C\u002Farticle>\n );\n}\n\n\u002F\u002F Client Component only for interactivity\n'use client';\n\nfunction AddToCartForm({ productId }: { productId: string }) {\n const [isAdding, setIsAdding] = useState(false);\n\n async function handleSubmit() {\n setIsAdding(true);\n await addToCart(productId);\n setIsAdding(false);\n }\n\n return (\n \u003Cform action={handleSubmit}>\n \u003Cbutton type=\"submit\" disabled={isAdding}>\n {isAdding ? 'Adding...' : 'Add to Cart'}\n \u003C\u002Fbutton>\n \u003C\u002Fform>\n );\n}\n```\n\n## Migration Guide\n\n### From React 18 to 19\n\n1. **Update Dependencies**:\n```bash\nnpm install react@19 react-dom@19\n```\n\n2. **Adopt Server Components**:\n - Identify data-fetching components\n - Remove client-side code from Server Components\n - Add 'use client' directive where needed\n\n3. **Replace Manual Optimistic Updates**:\n```typescript\n\u002F\u002F Before\nfunction TodoList({ todos, addTodo }) {\n const [optimisticTodos, setOptimisticTodos] = useState(todos);\n\n const handleAdd = async (text) => {\n const newTodo = { id: Date.now(), text };\n setOptimisticTodos([...optimisticTodos, newTodo]);\n await addTodo(newTodo);\n };\n}\n\n\u002F\u002F After\nfunction TodoList({ todos, addTodo }) {\n const [optimisticTodos, addOptimisticTodo] = useOptimistic(\n todos,\n (state, newTodo) => [...state, newTodo]\n );\n\n const handleAdd = async (formData) => {\n const newTodo = { id: Date.now(), text: formData.get('text') };\n addOptimisticTodo(newTodo);\n await addTodo(newTodo);\n };\n}\n```\n\n4. **Enable React Compiler**:\n - Install babel-plugin-react-compiler\n - Remove manual memoization\n - Let the compiler optimize automatically\n\n## References\n\n- React 19 Official Docs: https:\u002F\u002Freact.dev\u002Fblog\u002F2024\u002F04\u002F25\u002Freact-19\n- React Server Components: https:\u002F\u002Freact.dev\u002Freference\u002Frsc\u002Fserver-components\n- React Compiler: https:\u002F\u002Freact.dev\u002Flearn\u002Freact-compiler\n- TypeScript with React: https:\u002F\u002Freact-typescript-cheatsheet.netlify.app\u002F\n","# React Development Patterns\n\nExpert guide for building modern React 19 applications with new concurrent features, Server Components, Actions, and advanced patterns.\n\n## When to Use\n\n- Building React 19 components with TypeScript\u002FJavaScript\n- Managing component state with useState and useReducer\n- Handling side effects with useEffect\n- Optimizing performance with useMemo and useCallback\n- Creating custom hooks for reusable logic\n- Implementing component composition patterns\n- Working with refs using useRef\n- Using React 19's new features (use(), useOptimistic, useFormStatus)\n- Implementing Server Components and Actions\n- Working with Suspense and concurrent rendering\n- Building forms with new form hooks\n\n## Core Hooks Patterns\n\n### useState - State Management\n\nBasic state declaration and updates:\n\n```typescript\nimport { useState } from 'react';\n\nfunction Counter() {\n const [count, setCount] = useState(0);\n \n return (\n \u003Cbutton onClick={() => setCount(count + 1)}>\n Count: {count}\n \u003C\u002Fbutton>\n );\n}\n```\n\nState with initializer function (expensive computation):\n\n```typescript\nconst [state, setState] = useState(() => {\n const initialState = computeExpensiveValue();\n return initialState;\n});\n```\n\nMultiple state variables:\n\n```typescript\nfunction UserProfile() {\n const [name, setName] = useState('');\n const [age, setAge] = useState(0);\n const [email, setEmail] = useState('');\n \n return (\n \u003Cform>\n \u003Cinput value={name} onChange={e => setName(e.target.value)} \u002F>\n \u003Cinput type=\"number\" value={age} onChange={e => setAge(Number(e.target.value))} \u002F>\n \u003Cinput type=\"email\" value={email} onChange={e => setEmail(e.target.value)} \u002F>\n \u003C\u002Fform>\n );\n}\n```\n\n### useEffect - Side Effects\n\nBasic effect with cleanup:\n\n```typescript\nimport { useEffect } from 'react';\n\nfunction ChatRoom({ roomId }: { roomId: string }) {\n useEffect(() => {\n const connection = createConnection(roomId);\n connection.connect();\n \n \u002F\u002F Cleanup function\n return () => {\n connection.disconnect();\n };\n }, [roomId]); \u002F\u002F Dependency array\n \n return \u003Cdiv>Connected to {roomId}\u003C\u002Fdiv>;\n}\n```\n\nEffect with multiple dependencies:\n\n```typescript\nfunction ChatRoom({ roomId, serverUrl }: { roomId: string; serverUrl: string }) {\n useEffect(() => {\n const connection = createConnection(serverUrl, roomId);\n connection.connect();\n \n return () => connection.disconnect();\n }, [roomId, serverUrl]); \u002F\u002F Re-run when either changes\n \n return \u003Ch1>Welcome to {roomId}\u003C\u002Fh1>;\n}\n```\n\nEffect for subscriptions:\n\n```typescript\nfunction StatusBar() {\n const [isOnline, setIsOnline] = useState(true);\n \n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n \n function handleOffline() {\n setIsOnline(false);\n }\n \n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n \n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []); \u002F\u002F Empty array = run once on mount\n \n return \u003Ch1>{isOnline ? '✅ Online' : '❌ Disconnected'}\u003C\u002Fh1>;\n}\n```\n\n### useRef - Persistent References\n\nStoring mutable values without re-renders:\n\n```typescript\nimport { useRef } from 'react';\n\nfunction Timer() {\n const intervalRef = useRef\u003CNodeJS.Timeout | null>(null);\n \n const startTimer = () => {\n intervalRef.current = setInterval(() => {\n console.log('Tick');\n }, 1000);\n };\n \n const stopTimer = () => {\n if (intervalRef.current) {\n clearInterval(intervalRef.current);\n }\n };\n \n return (\n \u003C>\n \u003Cbutton onClick={startTimer}>Start\u003C\u002Fbutton>\n \u003Cbutton onClick={stopTimer}>Stop\u003C\u002Fbutton>\n \u003C\u002F>\n );\n}\n```\n\nDOM element references:\n\n```typescript\nfunction TextInput() {\n const inputRef = useRef\u003CHTMLInputElement>(null);\n \n const focusInput = () => {\n inputRef.current?.focus();\n };\n \n return (\n \u003C>\n \u003Cinput ref={inputRef} type=\"text\" \u002F>\n \u003Cbutton onClick={focusInput}>Focus Input\u003C\u002Fbutton>\n \u003C\u002F>\n );\n}\n```\n\n## Custom Hooks Pattern\n\nExtract reusable logic into custom hooks:\n\n```typescript\n\u002F\u002F useOnlineStatus.ts\nimport { useState, useEffect } from 'react';\n\nexport function useOnlineStatus() {\n const [isOnline, setIsOnline] = useState(true);\n \n useEffect(() => {\n function handleOnline() {\n setIsOnline(true);\n }\n \n function handleOffline() {\n setIsOnline(false);\n }\n \n window.addEventListener('online', handleOnline);\n window.addEventListener('offline', handleOffline);\n \n return () => {\n window.removeEventListener('online', handleOnline);\n window.removeEventListener('offline', handleOffline);\n };\n }, []);\n \n return isOnline;\n}\n\n\u002F\u002F Usage in components\nfunction StatusBar() {\n const isOnline = useOnlineStatus();\n return \u003Ch1>{isOnline ? '✅ Online' : '❌ Disconnected'}\u003C\u002Fh1>;\n}\n\nfunction SaveButton() {\n const isOnline = useOnlineStatus();\n return (\n \u003Cbutton disabled={!isOnline}>\n {isOnline ? 'Save' : 'Reconnecting...'}\n \u003C\u002Fbutton>\n );\n}\n```\n\nCustom hook with parameters:\n\n```typescript\n\u002F\u002F useChatRoom.ts\nimport { useEffect } from 'react';\n\ninterface ChatOptions {\n serverUrl: string;\n roomId: string;\n}\n\nexport function useChatRoom({ serverUrl, roomId }: ChatOptions) {\n useEffect(() => {\n const connection = createConnection(serverUrl, roomId);\n connection.connect();\n \n return () => connection.disconnect();\n }, [serverUrl, roomId]);\n}\n\n\u002F\u002F Usage\nfunction ChatRoom({ roomId }: { roomId: string }) {\n const [serverUrl, setServerUrl] = useState('https:\u002F\u002Flocalhost:1234');\n \n useChatRoom({ serverUrl, roomId });\n \n return (\n \u003C>\n \u003Cinput value={serverUrl} onChange={e => setServerUrl(e.target.value)} \u002F>\n \u003Ch1>Welcome to {roomId}\u003C\u002Fh1>\n \u003C\u002F>\n );\n}\n```\n\n## Component Composition Patterns\n\n### Props and Children\n\nBasic component with props:\n\n```typescript\ninterface ButtonProps {\n variant?: 'primary' | 'secondary';\n size?: 'sm' | 'md' | 'lg';\n onClick?: () => void;\n children: React.ReactNode;\n}\n\nfunction Button({ variant = 'primary', size = 'md', onClick, children }: ButtonProps) {\n return (\n \u003Cbutton \n className={`btn btn-${variant} btn-${size}`}\n onClick={onClick}\n >\n {children}\n \u003C\u002Fbutton>\n );\n}\n```\n\nComposition with children:\n\n```typescript\ninterface CardProps {\n children: React.ReactNode;\n className?: string;\n}\n\nfunction Card({ children, className = '' }: CardProps) {\n return (\n \u003Cdiv className={`card ${className}`}>\n {children}\n \u003C\u002Fdiv>\n );\n}\n\n\u002F\u002F Usage\nfunction UserProfile() {\n return (\n \u003CCard>\n \u003Ch2>John Doe\u003C\u002Fh2>\n \u003Cp>Software Engineer\u003C\u002Fp>\n \u003C\u002FCard>\n );\n}\n```\n\n### Lifting State Up\n\nShared state between siblings:\n\n```typescript\nfunction Parent() {\n const [activeIndex, setActiveIndex] = useState(0);\n \n return (\n \u003C>\n \u003CPanel\n isActive={activeIndex === 0}\n onShow={() => setActiveIndex(0)}\n >\n Panel 1 content\n \u003C\u002FPanel>\n \u003CPanel\n isActive={activeIndex === 1}\n onShow={() => setActiveIndex(1)}\n >\n Panel 2 content\n \u003C\u002FPanel>\n \u003C\u002F>\n );\n}\n\ninterface PanelProps {\n isActive: boolean;\n onShow: () => void;\n children: React.ReactNode;\n}\n\nfunction Panel({ isActive, onShow, children }: PanelProps) {\n return (\n \u003Cdiv>\n \u003Cbutton onClick={onShow}>Show\u003C\u002Fbutton>\n {isActive && \u003Cdiv>{children}\u003C\u002Fdiv>}\n \u003C\u002Fdiv>\n );\n}\n```\n\n## Performance Optimization\n\n### Avoid Unnecessary Effects\n\n❌ Bad - Using effect for derived state:\n\n```typescript\nfunction TodoList({ todos }: { todos: Todo[] }) {\n const [visibleTodos, setVisibleTodos] = useState\u003CTodo[]>([]);\n \n useEffect(() => {\n setVisibleTodos(todos.filter(t => !t.completed));\n }, [todos]); \u002F\u002F Unnecessary effect\n \n return \u003Cul>{\u002F* ... *\u002F}\u003C\u002Ful>;\n}\n```\n\n✅ Good - Compute during render:\n\n```typescript\nfunction TodoList({ todos }: { todos: Todo[] }) {\n const visibleTodos = todos.filter(t => !t.completed); \u002F\u002F Direct computation\n \n return \u003Cul>{\u002F* ... *\u002F}\u003C\u002Ful>;\n}\n```\n\n### useMemo for Expensive Computations\n\n```typescript\nimport { useMemo } from 'react';\n\nfunction DataTable({ data }: { data: Item[] }) {\n const sortedData = useMemo(() => {\n return [...data].sort((a, b) => a.name.localeCompare(b.name));\n }, [data]); \u002F\u002F Only recompute when data changes\n \n return \u003Ctable>{\u002F* render sortedData *\u002F}\u003C\u002Ftable>;\n}\n```\n\n### useCallback for Function Stability\n\n```typescript\nimport { useCallback } from 'react';\n\nfunction Parent() {\n const [count, setCount] = useState(0);\n \n const handleClick = useCallback(() => {\n console.log('Clicked', count);\n }, [count]); \u002F\u002F Recreate only when count changes\n \n return \u003CExpensiveChild onClick={handleClick} \u002F>;\n}\n```\n\n## TypeScript Best Practices\n\n### Type-Safe Props\n\n```typescript\ninterface UserProps {\n id: string;\n name: string;\n email: string;\n age?: number; \u002F\u002F Optional\n}\n\nfunction User({ id, name, email, age }: UserProps) {\n return (\n \u003Cdiv>\n \u003Ch2>{name}\u003C\u002Fh2>\n \u003Cp>{email}\u003C\u002Fp>\n {age && \u003Cp>Age: {age}\u003C\u002Fp>}\n \u003C\u002Fdiv>\n );\n}\n```\n\n### Generic Components\n\n```typescript\ninterface ListProps\u003CT> {\n items: T[];\n renderItem: (item: T) => React.ReactNode;\n}\n\nfunction List\u003CT>({ items, renderItem }: ListProps\u003CT>) {\n return (\n \u003Cul>\n {items.map((item, index) => (\n \u003Cli key={index}>{renderItem(item)}\u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n );\n}\n\n\u002F\u002F Usage\n\u003CList \n items={users}\n renderItem={(user) => \u003Cspan>{user.name}\u003C\u002Fspan>}\n\u002F>\n```\n\n### Event Handlers\n\n```typescript\nfunction Form() {\n const handleSubmit = (e: React.FormEvent\u003CHTMLFormElement>) => {\n e.preventDefault();\n \u002F\u002F Handle form submission\n };\n \n const handleChange = (e: React.ChangeEvent\u003CHTMLInputElement>) => {\n console.log(e.target.value);\n };\n \n return (\n \u003Cform onSubmit={handleSubmit}>\n \u003Cinput onChange={handleChange} \u002F>\n \u003C\u002Fform>\n );\n}\n```\n\n## Common Patterns\n\n### Controlled Components\n\n```typescript\nfunction ControlledInput() {\n const [value, setValue] = useState('');\n \n return (\n \u003Cinput \n value={value}\n onChange={e => setValue(e.target.value)}\n \u002F>\n );\n}\n```\n\n### Conditional Rendering\n\n```typescript\nfunction Greeting({ isLoggedIn }: { isLoggedIn: boolean }) {\n return (\n \u003Cdiv>\n {isLoggedIn ? (\n \u003CUserGreeting \u002F>\n ) : (\n \u003CGuestGreeting \u002F>\n )}\n \u003C\u002Fdiv>\n );\n}\n```\n\n### Lists and Keys\n\n```typescript\nfunction UserList({ users }: { users: User[] }) {\n return (\n \u003Cul>\n {users.map(user => (\n \u003Cli key={user.id}>\n {user.name}\n \u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n );\n}\n```\n\n## Best Practices\n\n### General React Best Practices\n\n1. **Dependency Arrays**: Always specify correct dependencies in useEffect\n2. **State Structure**: Keep state minimal and avoid redundant state\n3. **Component Size**: Keep components small and focused\n4. **Custom Hooks**: Extract complex logic into reusable custom hooks\n5. **TypeScript**: Use TypeScript for type safety\n6. **Keys**: Use stable IDs as keys for list items, not array indices\n7. **Immutability**: Never mutate state directly\n8. **Effects**: Use effects only for synchronization with external systems\n9. **Performance**: Profile before optimizing with useMemo\u002FuseCallback\n\n### React 19 Specific Best Practices\n\n1. **Server Components**: Use Server Components for data fetching and static content\n2. **Client Components**: Mark components as 'use client' only when necessary\n3. **Actions**: Use Server Actions for mutations and form submissions\n4. **Optimistic Updates**: Implement useOptimistic for better UX\n5. **use() Hook**: Use for reading promises and context conditionally\n6. **Form State**: Use useFormState and useFormStatus for complex forms\n7. **Concurrent Features**: Leverage useTransition for non-urgent updates\n8. **Error Boundaries**: Implement proper error handling with error boundaries\n\n## Common Pitfalls\n\n### General React Pitfalls\n\n❌ **Missing Dependencies**:\n```typescript\nuseEffect(() => {\n \u002F\u002F Uses 'count' but doesn't include it in deps\n console.log(count);\n}, []); \u002F\u002F Wrong!\n```\n\n❌ **Mutating State**:\n```typescript\nconst [items, setItems] = useState([]);\nitems.push(newItem); \u002F\u002F Wrong! Mutates state\nsetItems(items); \u002F\u002F Won't trigger re-render\n```\n\n✅ **Correct Approach**:\n```typescript\nsetItems([...items, newItem]); \u002F\u002F Create new array\n```\n\n### React 19 Specific Pitfalls\n\n❌ **Using use() outside of render**:\n```typescript\n\u002F\u002F Wrong!\nfunction handleClick() {\n const data = use(promise); \u002F\u002F Error: use() can only be called in render\n}\n```\n\n✅ **Correct usage**:\n```tsx\nfunction Component({ promise }) {\n const data = use(promise); \u002F\u002F Correct: called during render\n return \u003Cdiv>{data}\u003C\u002Fdiv>;\n}\n```\n\n❌ **Forgetting 'use server' directive**:\n```typescript\n\u002F\u002F Wrong - missing 'use server'\nexport async function myAction() {\n \u002F\u002F This will run on the client!\n}\n```\n\n✅ **Correct Server Action**:\n```typescript\n'use server'; \u002F\u002F Must be at the top\n\nexport async function myAction() {\n \u002F\u002F Now runs on the server\n}\n```\n\n❌ **Mixing Server and Client logic incorrectly**:\n```tsx\n\u002F\u002F Wrong - trying to use browser APIs in Server Component\nexport default async function ServerComponent() {\n const width = window.innerWidth; \u002F\u002F Error: window is not defined\n return \u003Cdiv>{width}\u003C\u002Fdiv>;\n}\n```\n\n✅ **Correct separation**:\n```tsx\n\u002F\u002F Server Component for data\nexport default async function ServerComponent() {\n const data = await fetchData();\n return \u003CClientComponent data={data} \u002F>;\n}\n\n\u002F\u002F Client Component for browser APIs\n'use client';\n\nfunction ClientComponent({ data }) {\n const [width, setWidth] = useState(window.innerWidth);\n \u002F\u002F Handle resize logic...\n return \u003Cdiv>{width}\u003C\u002Fdiv>;\n}\n```\n\n## React 19 New Features\n\n### use() Hook - Reading Resources\n\nThe `use()` hook reads the value from a resource like a Promise or Context:\n\n```typescript\nimport { use } from 'react';\n\n\u002F\u002F Reading a Promise in a component\nfunction MessageComponent({ messagePromise }) {\n const message = use(messagePromise);\n return \u003Cp>{message}\u003C\u002Fp>;\n}\n\n\u002F\u002F Reading Context conditionally\nfunction Button() {\n if (condition) {\n const theme = use(ThemeContext);\n return \u003Cbutton className={theme}>Click\u003C\u002Fbutton>;\n }\n return \u003Cbutton>Click\u003C\u002Fbutton>;\n}\n```\n\n### useOptimistic Hook - Optimistic UI Updates\n\nManage optimistic UI updates for async operations:\n\n```typescript\nimport { useOptimistic } from 'react';\n\nfunction TodoList({ todos, addTodo }) {\n const [optimisticTodos, addOptimisticTodo] = useOptimistic(\n todos,\n (state, newTodo) => [...state, newTodo]\n );\n\n const handleSubmit = async (formData) => {\n const newTodo = { id: Date.now(), text: formData.get('text') };\n\n \u002F\u002F Optimistically add to UI\n addOptimisticTodo(newTodo);\n\n \u002F\u002F Actually add to backend\n await addTodo(newTodo);\n };\n\n return (\n \u003Cform action={handleSubmit}>\n {optimisticTodos.map(todo => (\n \u003Cdiv key={todo.id}>{todo.text}\u003C\u002Fdiv>\n ))}\n \u003Cinput type=\"text\" name=\"text\" \u002F>\n \u003Cbutton type=\"submit\">Add Todo\u003C\u002Fbutton>\n \u003C\u002Fform>\n );\n}\n```\n\n### useFormStatus Hook - Form State\n\nAccess form submission status from child components:\n\n```typescript\nimport { useFormStatus } from 'react';\n\nfunction SubmitButton() {\n const { pending, data } = useFormStatus();\n\n return (\n \u003Cbutton type=\"submit\" disabled={pending}>\n {pending ? 'Submitting...' : 'Submit'}\n \u003C\u002Fbutton>\n );\n}\n\nfunction ContactForm() {\n return (\n \u003Cform action={submitForm}>\n \u003Cinput name=\"email\" type=\"email\" \u002F>\n \u003CSubmitButton \u002F>\n \u003C\u002Fform>\n );\n}\n```\n\n### useFormState Hook - Form State Management\n\nManage form state with error handling:\n\n```typescript\nimport { useFormState } from 'react';\n\nasync function submitAction(prevState: string | null, formData: FormData) {\n const email = formData.get('email') as string;\n\n if (!email.includes('@')) {\n return 'Invalid email address';\n }\n\n await submitToDatabase(email);\n return null;\n}\n\nfunction EmailForm() {\n const [state, formAction] = useFormState(submitAction, null);\n\n return (\n \u003Cform action={formAction}>\n \u003Cinput name=\"email\" type=\"email\" \u002F>\n \u003Cbutton type=\"submit\">Subscribe\u003C\u002Fbutton>\n {state && \u003Cp className=\"error\">{state}\u003C\u002Fp>}\n \u003C\u002Fform>\n );\n}\n```\n\n### Server Actions\n\nDefine server-side functions for form handling:\n\n```typescript\n\u002F\u002F app\u002Factions.ts\n'use server';\n\nimport { redirect } from 'next\u002Fnavigation';\nimport { revalidatePath } from 'next\u002Fcache';\n\nexport async function createPost(formData: FormData) {\n const title = formData.get('title') as string;\n const content = formData.get('content') as string;\n\n \u002F\u002F Validate input\n if (!title || !content) {\n return { error: 'Title and content are required' };\n }\n\n \u002F\u002F Save to database\n const post = await db.post.create({\n data: { title, content }\n });\n\n \u002F\u002F Update cache and redirect\n revalidatePath('\u002Fposts');\n redirect(`\u002Fposts\u002F${post.id}`);\n}\n```\n\n### Server Components\n\nComponents that run exclusively on the server:\n\n```typescript\n\u002F\u002F app\u002Fposts\u002Fpage.tsx - Server Component\nasync function PostsPage() {\n \u002F\u002F Server-side data fetching\n const posts = await db.post.findMany({\n orderBy: { createdAt: 'desc' },\n take: 10\n });\n\n return (\n \u003Cdiv>\n \u003Ch1>Latest Posts\u003C\u002Fh1>\n \u003CPostsList posts={posts} \u002F>\n \u003C\u002Fdiv>\n );\n}\n\n\u002F\u002F Client Component for interactivity\n'use client';\n\nfunction PostsList({ posts }: { posts: Post[] }) {\n const [selectedId, setSelectedId] = useState\u003Cnumber | null>(null);\n\n return (\n \u003Cul>\n {posts.map(post => (\n \u003Cli\n key={post.id}\n onClick={() => setSelectedId(post.id)}\n className={selectedId === post.id ? 'selected' : ''}\n >\n {post.title}\n \u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n );\n}\n```\n\n## React Compiler\n\n### Automatic Optimization\n\nReact Compiler automatically optimizes your components:\n\n```typescript\n\u002F\u002F Before React Compiler - manual memoization needed\nconst ExpensiveComponent = memo(function ExpensiveComponent({\n data,\n onUpdate\n}) {\n const processedData = useMemo(() => {\n return data.map(item => ({\n ...item,\n computed: expensiveCalculation(item)\n }));\n }, [data]);\n\n const handleClick = useCallback((id) => {\n onUpdate(id);\n }, [onUpdate]);\n\n return (\n \u003Cdiv>\n {processedData.map(item => (\n \u003CItem\n key={item.id}\n item={item}\n onClick={handleClick}\n \u002F>\n ))}\n \u003C\u002Fdiv>\n );\n});\n\n\u002F\u002F After React Compiler - no manual optimization needed\nfunction ExpensiveComponent({ data, onUpdate }) {\n const processedData = data.map(item => ({\n ...item,\n computed: expensiveCalculation(item)\n }));\n\n const handleClick = (id) => {\n onUpdate(id);\n };\n\n return (\n \u003Cdiv>\n {processedData.map(item => (\n \u003CItem\n key={item.id}\n item={item}\n onClick={handleClick}\n \u002F>\n ))}\n \u003C\u002Fdiv>\n );\n}\n```\n\n### Installation and Setup\n\n```bash\n# Install React Compiler\nnpm install -D babel-plugin-react-compiler@latest\n\n# Install ESLint plugin for validation\nnpm install -D eslint-plugin-react-hooks@latest\n```\n\n```javascript\n\u002F\u002F babel.config.js\nmodule.exports = {\n plugins: [\n 'babel-plugin-react-compiler', \u002F\u002F Must run first!\n \u002F\u002F ... other plugins\n ],\n};\n```\n\n```javascript\n\u002F\u002F vite.config.js for Vite users\nimport { defineConfig } from 'vite';\nimport react from '@vitejs\u002Fplugin-react';\n\nexport default defineConfig({\n plugins: [\n react({\n babel: {\n plugins: ['babel-plugin-react-compiler'],\n },\n }),\n ],\n});\n```\n\n### Compiler Configuration\n\n```javascript\n\u002F\u002F babel.config.js with compiler options\nmodule.exports = {\n plugins: [\n [\n 'babel-plugin-react-compiler',\n {\n \u002F\u002F Enable compilation for specific files\n target: '18', \u002F\u002F or '19'\n \u002F\u002F Debug mode for development\n debug: process.env.NODE_ENV === 'development'\n }\n ],\n ],\n};\n\n\u002F\u002F Incremental adoption with overrides\nmodule.exports = {\n plugins: [],\n overrides: [\n {\n test: '.\u002Fsrc\u002Fcomponents\u002F**\u002F*.{js,jsx,ts,tsx}',\n plugins: ['babel-plugin-react-compiler']\n }\n ]\n};\n```\n\n## Advanced Server Components Patterns\n\n### Mixed Server\u002FClient Architecture\n\n```typescript\n\u002F\u002F Server Component for data fetching\nasync function ProductPage({ id }: { id: string }) {\n const product = await fetchProduct(id);\n const related = await fetchRelatedProducts(id);\n\n return (\n \u003Cdiv>\n \u003CProductDetails product={product} \u002F>\n \u003CProductGallery images={product.images} \u002F>\n \u003CRelatedProducts products={related} \u002F>\n \u003C\u002Fdiv>\n );\n}\n\n\u002F\u002F Client Component for interactivity\n'use client';\n\nfunction ProductDetails({ product }: { product: Product }) {\n const [quantity, setQuantity] = useState(1);\n const [isAdded, setIsAdded] = useState(false);\n\n return (\n \u003Cdiv>\n \u003Ch1>{product.name}\u003C\u002Fh1>\n \u003Cp>{product.description}\u003C\u002Fp>\n \u003Cp>${product.price}\u003C\u002Fp>\n\n \u003CQuantitySelector\n value={quantity}\n onChange={setQuantity}\n \u002F>\n\n \u003CAddToCartButton\n productId={product.id}\n quantity={quantity}\n onAdded={() => setIsAdded(true)}\n \u002F>\n\n {isAdded && \u003Cp>Added to cart!\u003C\u002Fp>}\n \u003C\u002Fdiv>\n );\n}\n```\n\n### Server Actions with Validation\n\n```typescript\n'use server';\n\nimport { z } from 'zod';\n\nconst checkoutSchema = z.object({\n items: z.array(z.object({\n productId: z.string(),\n quantity: z.number().min(1)\n })),\n shippingAddress: z.object({\n street: z.string().min(1),\n city: z.string().min(1),\n zipCode: z.string().regex(\u002F^\\d{5}$\u002F)\n }),\n paymentMethod: z.enum(['credit', 'paypal', 'apple'])\n});\n\nexport async function processCheckout(\n prevState: any,\n formData: FormData\n) {\n \u002F\u002F Extract and validate data\n const rawData = {\n items: JSON.parse(formData.get('items') as string),\n shippingAddress: {\n street: formData.get('street'),\n city: formData.get('city'),\n zipCode: formData.get('zipCode')\n },\n paymentMethod: formData.get('paymentMethod')\n };\n\n const result = checkoutSchema.safeParse(rawData);\n\n if (!result.success) {\n return {\n error: 'Validation failed',\n fieldErrors: result.error.flatten().fieldErrors\n };\n }\n\n try {\n \u002F\u002F Process payment\n const order = await createOrder(result.data);\n\n \u002F\u002F Update inventory\n await updateInventory(result.data.items);\n\n \u002F\u002F Send confirmation\n await sendConfirmationEmail(order);\n\n \u002F\u002F Revalidate cache\n revalidatePath('\u002Forders');\n\n return { success: true, orderId: order.id };\n } catch (error) {\n return { error: 'Payment failed' };\n }\n}\n```\n\n## Concurrent Features\n\n### useTransition for Non-Urgent Updates\n\n```typescript\nimport { useTransition, useState } from 'react';\n\nfunction SearchableList({ items }: { items: Item[] }) {\n const [query, setQuery] = useState('');\n const [isPending, startTransition] = useTransition();\n const [filteredItems, setFilteredItems] = useState(items);\n\n const handleChange = (e: React.ChangeEvent\u003CHTMLInputElement>) => {\n \u002F\u002F Update input immediately\n setQuery(e.target.value);\n\n \u002F\u002F Transition the filter operation\n startTransition(() => {\n setFilteredItems(\n items.filter(item =>\n item.name.toLowerCase().includes(e.target.value.toLowerCase())\n )\n );\n });\n };\n\n return (\n \u003Cdiv>\n \u003Cinput\n type=\"text\"\n value={query}\n onChange={handleChange}\n placeholder=\"Search items...\"\n \u002F>\n\n {isPending && \u003Cdiv className=\"loading\">Filtering...\u003C\u002Fdiv>}\n\n \u003Cul>\n {filteredItems.map(item => (\n \u003Cli key={item.id}>{item.name}\u003C\u002Fli>\n ))}\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n );\n}\n```\n\n### useDeferredValue for Expensive UI\n\n```typescript\nimport { useDeferredValue, useMemo } from 'react';\n\nfunction DataGrid({ data }: { data: DataRow[] }) {\n const [searchTerm, setSearchTerm] = useState('');\n const deferredSearchTerm = useDeferredValue(searchTerm);\n\n const filteredData = useMemo(() => {\n return data.filter(row =>\n Object.values(row).some(value =>\n String(value).toLowerCase().includes(deferredSearchTerm.toLowerCase())\n )\n );\n }, [data, deferredSearchTerm]);\n\n return (\n \u003Cdiv>\n \u003Cinput\n value={searchTerm}\n onChange={e => setSearchTerm(e.target.value)}\n placeholder=\"Search...\"\n className={searchTerm !== deferredSearchTerm ? 'stale' : ''}\n \u002F>\n\n \u003CDataGridRows\n data={filteredData}\n isStale={searchTerm !== deferredSearchTerm}\n \u002F>\n \u003C\u002Fdiv>\n );\n}\n```\n\n## Testing React 19 Features\n\n### Testing Server Actions\n\n```typescript\nimport { render, screen, fireEvent } from '@testing-library\u002Freact';\nimport { jest } from '@jest\u002Fglobals';\nimport ContactForm from '.\u002FContactForm';\n\n\u002F\u002F Mock server action\nconst mockSubmitForm = jest.fn();\n\ndescribe('ContactForm', () => {\n it('submits form with server action', async () => {\n render(\u003CContactForm \u002F>);\n\n fireEvent.change(screen.getByLabelText('Email'), {\n target: { value: 'test@example.com' }\n });\n\n fireEvent.click(screen.getByText('Submit'));\n\n expect(mockSubmitForm).toHaveBeenCalledWith(\n expect.any(FormData)\n );\n });\n\n it('shows loading state during submission', async () => {\n mockSubmitForm.mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)));\n\n render(\u003CContactForm \u002F>);\n\n fireEvent.click(screen.getByText('Submit'));\n\n expect(screen.getByText('Submitting...')).toBeInTheDocument();\n\n await waitFor(() => {\n expect(screen.getByText('Submit')).toBeInTheDocument();\n });\n });\n});\n```\n\n### Testing Optimistic Updates\n\n```typescript\nimport { render, screen, fireEvent, waitFor } from '@testing-library\u002Freact';\nimport { jest } from '@jest\u002Fglobals';\nimport TodoList from '.\u002FTodoList';\n\ndescribe('useOptimistic', () => {\n it('shows optimistic update immediately', async () => {\n const mockAddTodo = jest.fn(() => new Promise(resolve => setTimeout(resolve, 100)));\n\n render(\n \u003CTodoList\n todos={[]}\n addTodo={mockAddTodo}\n \u002F>\n );\n\n fireEvent.change(screen.getByPlaceholderText('Add a todo'), {\n target: { value: 'New todo' }\n });\n\n fireEvent.click(screen.getByText('Add'));\n\n \u002F\u002F Optimistic update appears immediately\n expect(screen.getByText('New todo')).toBeInTheDocument();\n\n \u002F\u002F Wait for actual submission\n await waitFor(() => {\n expect(mockAddTodo).toHaveBeenCalledWith({\n id: expect.any(Number),\n text: 'New todo'\n });\n });\n });\n});\n```\n\n## Performance Best Practices\n\n### React Compiler Guidelines\n\n1. **Write Standard React Code**: The compiler works best with idiomatic React patterns\n2. **Avoid Manual Memoization**: Let the compiler handle useMemo, useCallback, and memo\n3. **Keep Components Pure**: Avoid side effects in render\n4. **Use Stable References**: Pass stable objects as props\n\n```typescript\n\u002F\u002F Good: Clean, idiomatic React\nfunction ProductCard({ product, onAddToCart }) {\n const [quantity, setQuantity] = useState(1);\n\n const handleAdd = () => {\n onAddToCart(product.id, quantity);\n };\n\n return (\n \u003Cdiv>\n \u003Ch3>{product.name}\u003C\u002Fh3>\n \u003Cp>${product.price}\u003C\u002Fp>\n \u003Cinput\n type=\"number\"\n value={quantity}\n onChange={e => setQuantity(Number(e.target.value))}\n min=\"1\"\n \u002F>\n \u003Cbutton onClick={handleAdd}>Add to Cart\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n}\n\n\u002F\u002F Avoid: Manual optimization\nfunction ProductCard({ product, onAddToCart }) {\n const [quantity, setQuantity] = useState(1);\n\n const handleAdd = useCallback(() => {\n onAddToCart(product.id, quantity);\n }, [product.id, quantity, onAddToCart]);\n\n return (\n \u003Cdiv>\n \u003Ch3>{product.name}\u003C\u002Fh3>\n \u003Cp>${product.price}\u003C\u002Fp>\n \u003CQuantityInput\n value={quantity}\n onChange={setQuantity}\n \u002F>\n \u003Cbutton onClick={handleAdd}>Add to Cart\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n );\n}\n```\n\n### Server Components Best Practices\n\n1. **Keep Server Components Server-Only**: No event handlers, hooks, or browser APIs\n2. **Minimize Client Components**: Only use 'use client' when necessary\n3. **Pass Data as Props**: Serialize data when passing from Server to Client\n4. **Use Server Actions for Mutations**: Keep data operations on the server\n\n```typescript\n\u002F\u002F Good: Server Component for static content\nasync function ProductPage({ id }: { id: string }) {\n const product = await fetchProduct(id);\n\n return (\n \u003Carticle>\n \u003Cheader>\n \u003Ch1>{product.name}\u003C\u002Fh1>\n \u003Cp>{product.description}\u003C\u002Fp>\n \u003C\u002Fheader>\n\n \u003Cimg\n src={product.imageUrl}\n alt={product.name}\n width={600}\n height={400}\n \u002F>\n\n \u003CPriceDisplay price={product.price} \u002F>\n \u003CAddToCartForm productId={product.id} \u002F>\n \u003C\u002Farticle>\n );\n}\n\n\u002F\u002F Client Component only for interactivity\n'use client';\n\nfunction AddToCartForm({ productId }: { productId: string }) {\n const [isAdding, setIsAdding] = useState(false);\n\n async function handleSubmit() {\n setIsAdding(true);\n await addToCart(productId);\n setIsAdding(false);\n }\n\n return (\n \u003Cform action={handleSubmit}>\n \u003Cbutton type=\"submit\" disabled={isAdding}>\n {isAdding ? 'Adding...' : 'Add to Cart'}\n \u003C\u002Fbutton>\n \u003C\u002Fform>\n );\n}\n```\n\n## Migration Guide\n\n### From React 18 to 19\n\n1. **Update Dependencies**:\n```bash\nnpm install react@19 react-dom@19\n```\n\n2. **Adopt Server Components**:\n - Identify data-fetching components\n - Remove client-side code from Server Components\n - Add 'use client' directive where needed\n\n3. **Replace Manual Optimistic Updates**:\n```typescript\n\u002F\u002F Before\nfunction TodoList({ todos, addTodo }) {\n const [optimisticTodos, setOptimisticTodos] = useState(todos);\n\n const handleAdd = async (text) => {\n const newTodo = { id: Date.now(), text };\n setOptimisticTodos([...optimisticTodos, newTodo]);\n await addTodo(newTodo);\n };\n}\n\n\u002F\u002F After\nfunction TodoList({ todos, addTodo }) {\n const [optimisticTodos, addOptimisticTodo] = useOptimistic(\n todos,\n (state, newTodo) => [...state, newTodo]\n );\n\n const handleAdd = async (formData) => {\n const newTodo = { id: Date.now(), text: formData.get('text') };\n addOptimisticTodo(newTodo);\n await addTodo(newTodo);\n };\n}\n```\n\n4. **Enable React Compiler**:\n - Install babel-plugin-react-compiler\n - Remove manual memoization\n - Let the compiler optimize automatically\n\n## References\n\n- React 19 Official Docs: https:\u002F\u002Freact.dev\u002Fblog\u002F2024\u002F04\u002F25\u002Freact-19\n- React Server Components: https:\u002F\u002Freact.dev\u002Freference\u002Frsc\u002Fserver-components\n- React Compiler: https:\u002F\u002Freact.dev\u002Flearn\u002Freact-compiler\n- TypeScript with React: https:\u002F\u002Freact-typescript-cheatsheet.netlify.app\u002F\n",{"name":5,"tags":55,"license":15,"version":66,"category":49,"language":67,"framework":30,"description":7,"allowed-tools":68,"subcategories":69},[30,56,57,58,59,38,39,60,42,61,62,63,64,65],"react-19","typescript","javascript","jsx","server-components","suspense","concurrent-rendering","react-compiler","use-optimistic","form-actions","2.0.0","typescript,javascript,tsx,jsx","Read, Write, Edit, Bash, Grep, Glob",[47,39,70,48,60,71,34],"state-management","forms","main","62141d825eb73b2f691358c081d3da7d67278315",".legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Freact-patterns","https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar","https:\u002F\u002Fgithub.com\u002Fcastle-x","2026-06-01 15:59:22",{"source":8,"skillName":5,"commands":79,"prompt":89,"zipAvailable":90},[80,83,86],{"tool":81,"command":82},"npx","npx skills add castle-x\u002Fsonar --skill react-patterns",{"tool":84,"command":85},"bunx","bunx skills add castle-x\u002Fsonar --skill react-patterns",{"tool":87,"command":88},"pnpm","pnpm dlx skills add castle-x\u002Fsonar --skill react-patterns","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Freact-patterns\u002FSKILL.md",true,[92,98],{"path":93,"resourceType":94,"resourceTypeDesc":95,"sizeBytes":96,"sourceHtmlUrl":97},"learn.md","REFERENCE","参考文档",15687,"https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Freact-patterns\u002Flearn.md",{"path":99,"resourceType":94,"resourceTypeDesc":95,"sizeBytes":100,"sourceHtmlUrl":101},"reference.md",14183,"https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Freact-patterns\u002Freference.md",[103,129,152,176,195,216],{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":113,"publishedAt":50},"01M6PE1J3SKAAEVNCW7NTJ3TWH","tailwind-css-patterns","Comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React\u002FVue\u002FSvelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.","https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Ftailwind-css-patterns\u002FSKILL.md",[109,110],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":111,"categoryName":112,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",[114,115,31,116,117,118,119,120,47,30,121,122,38,123,124,125,126,127,128,33],"css","Tailwind","Tailwind CSS","tailwind css patterns","design","tailwindcss","workflow","design systems","styling","responsive design","layout","svelte","utility","Utilities","spacing",{"skillNo":130,"name":131,"nameZh":6,"description":132,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":133,"categories":134,"keywords":141,"publishedAt":50},"01M6PE0PCVCSDMP855MEAXEHCD","shadcn-ui","Complete shadcn\u002Fui component library guide including installation, configuration, and implementation of accessible React components. Use when setting up shadcn\u002Fui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.","https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Fshadcn-ui\u002FSKILL.md",[135,136],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":137,"categoryName":138,"taxonomyType":139,"taxonomyTypeDesc":140},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[142,143,144,114,119,47,30,145,46,146,147,115,41,148,40,149,38,150,33,151],"shadcn","ui","shadcn ui","react components","component library","nextjs","zod","up","themes","ui patterns",{"skillNo":153,"name":154,"nameZh":6,"description":155,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":156,"categories":157,"keywords":159,"publishedAt":50},"01M6PDZK79YYADCGJTJDBRK1HQ","vercel-react-native-skills","React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.","https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Freact-native-skills\u002FSKILL.md",[158],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[30,160,161,162,163,164,48,47,165,166,167,168,169,170,171,172,173,33,174,175],"vercel react native skills","react native","vercel","react native skills","native","tasks","best practices","use","modules","platform","triggers","apps","react native components","with","for","animations",{"skillNo":177,"name":178,"nameZh":6,"description":179,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":180,"categories":181,"keywords":183,"publishedAt":50},"01M6PDZ8YY9QHYZQFWHAFJSJGK","vercel-react-best-practices","React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React\u002FNext.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.","https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.legacy\u002Fdatasource\u002F.codebuddy\u002Fskills\u002Freact-best-practices\u002FSKILL.md",[182],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[30,184,166,185,162,186,48,47,145,187,165,188,189,190,191,31,192,193,170,194],"vercel react best practices","react best practices","writing","guidelines","code","Optimization","data","refactoring","next","pages","data fetching",{"skillNo":196,"name":197,"nameZh":6,"description":198,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":199,"categories":200,"keywords":201,"publishedAt":50},"01M6PDR22TXCNQ5220G6Y1WZ83","openspec-verify-change","Verify implementation matches change artifacts. Use when the user wants to validate that implementation is complete, correct, and coherent before archiving.","https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fopenspec-verify-change\u002FSKILL.md",[],[202,203,204,205,206,207,208,209,210,211,167,212,213,214,215],"change","openspec verify change","verify","verify change","openspec","cli","validate","artifacts","correct","user","implementation","coherent","verify implementation","complete",{"skillNo":217,"name":218,"nameZh":6,"description":219,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":220,"categories":221,"keywords":222,"publishedAt":50},"01M6PDQXE5GP17RTMCFJ8TQCQT","openspec-sync-specs","Sync delta specs from a change to main specs. Use when the user wants to update main specs with changes from a delta spec, without archiving the change.","https:\u002F\u002Fgithub.com\u002Fcastle-x\u002Fsonar\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fopenspec-sync-specs\u002FSKILL.md",[],[223,224,206,207,225,202,226,211,167,227,72,173,228],"sync","openspec sync specs","spec","update","delta","changes"]