React 19 migration traps your AI keeps falling into (and how to fix them with .mdc rules)

Every AI coding assistant was trained on React 18 patterns. When you're building with React 19 + Next.js 15, the AI generates code that compiles perfectly but fails at runtime or behaves unexpectedly. Here are the 4 most common React 19 traps I've documented, with .mdc rules to prevent each one. 1. useFormStatus() returns { pending: false } forever The trap: The AI places useFormStatus() in the same component that renders the <form>. This will NEVER work — useFormStatus only reads status from a parent <form>. // ❌ AI generates this — pending is ALWAYS false 'use client' export function MyForm() { const { pending } = useFormStatus() return ( <form action={createItem}> <Button disabled={pending}>Submit</Button> </form> ) } // ✅ Extract the button to a child component function SubmitButton() { const { pending } = useFormStatus() return <Button disabled={pending}>{pending ? 'Saving...' : 'Submit'}</Button> } export function MyForm() { return