React Compiler: Cannot compile component — unsupported syntax detected

What causes this error

The React Compiler auto-memoizes components and hooks by statically analyzing your code for a set of safety rules — no mutating props/state after reading them mid-render, following the Rules of Hooks, and a few other constraints. When it detects a pattern it can't prove is safe, it opts that specific component out of compilation instead of guessing (and potentially breaking the app), and reports which rule was violated.

The Fix

// Flagged — mutating an array after reading its length earlier in the same render
function List({ items }) {
  const count = items.length;
  items.push(newItem); // mutation during render — compiler bails out
  return <div>{count} items</div>;
}

// Fix — don't mutate props/state during render; derive new values instead
function List({ items }) {
  const allItems = [...items, newItem];
  return <div>{allItems.length} items</div>;
}

A component the compiler skips isn't broken — it just falls back to normal React behavior without automatic memoization, so the fix is about restoring the optimization, not fixing a crash.

Common causes / variations

• Mutating an array, object, or Map that came from props or state during render
• Calling hooks conditionally, which also violates the compiler's static-order requirement
• Using unusual dynamic patterns (e.g. `eval`-like code, or reassigning imported bindings) that the compiler can't reason about

Related errors

See also: Rules of Hooks violation, useMemo/useCallback recomputing every render.