--- name: react-19 description: > React 19 patterns with React Compiler. Trigger: When writing React 19 components/hooks in .tsx (React Compiler rules, hook patterns, refs as props). If using Next.js App Router/Server Actions, also use nextjs-15. license: Apache-2.0 metadata: author: sgc version: '1.0' scope: [root, ui] auto_invoke: 'Writing React components' allowed-tools: Read, Edit, Write, Glob, Grep, Bash, WebFetch, WebSearch, Task --- ## No Manual Memoization (REQUIRED) ```typescript // ✅ React Compiler handles optimization automatically function Component({ items }) { const filtered = items.filter(x => x.active); const sorted = filtered.sort((a, b) => a.name.localeCompare(b.name)); const handleClick = (id) => { console.log(id); }; return ; } // ❌ NEVER: Manual memoization const filtered = useMemo(() => items.filter(x => x.active), [items]); const handleClick = useCallback((id) => console.log(id), []); ``` ## Imports (REQUIRED) ```typescript // ✅ ALWAYS: Named imports import { useState, useEffect, useRef } from 'react' // ❌ NEVER import React from 'react' import * as React from 'react' ``` ## Server Components First ```typescript // ✅ Server Component (default) - no directive export default async function Page() { const data = await fetchData(); return ; } // ✅ Client Component - only when needed "use client"; export function Interactive() { const [state, setState] = useState(false); return ; } ``` ## When to use "use client" - useState, useEffect, useRef, useContext - Event handlers (onClick, onChange) - Browser APIs (window, localStorage) ## use() Hook ```typescript import { use } from "react"; // Read promises (suspends until resolved) function Comments({ promise }) { const comments = use(promise); return comments.map(c =>

{c.text}

); } // Conditional context (not possible with useContext!) function Theme({ showTheme }) { if (showTheme) { const theme = use(ThemeContext); return

Themed

; } return

Plain

; } ``` ## Actions & useActionState ```typescript "use server"; async function submitForm(formData: FormData) { await saveToDatabase(formData); revalidatePath("/"); } // With pending state import { useActionState } from "react"; function Form() { const [state, action, isPending] = useActionState(submitForm, null); return ( ); } ``` ## ref as Prop (No forwardRef) ```typescript // ✅ React 19: ref is just a prop function Input({ ref, ...props }) { return ; } // ❌ Old way (unnecessary now) const Input = forwardRef((props, ref) => ); ```

react-19

Scan your own AI components