react-hooks/unsupported-syntax

Disallow syntax that the React Compiler cannot compile, such as eval()

Also called react_hooks/unsupported-syntax, react/unsupported-syntax

The React Compiler needs to know everything a component reads and writes. eval() runs code it can't see, so it skips the whole component. The component still works, but it gets no automatic memoization.

The rule only looks at components and hooks, including the functions nested in them.

Configure#

Off by default. To turn it on:

bunfig.toml
[lint.rules]
"react-hooks/unsupported-syntax" = "error" # or "warn"

Examples#

example.jsx1 problem
function Calculator({ formula }) {
  const result = eval(formula);
  return <output>{result}</output>;
}
example.jsx1 problem
function Calculator({ formula, onResult }) {
  return <button onClick={() => onResult(eval(formula))}>Run</button>;
}
example.jsxNo problems
function Calculator({ formula }) {
  const result = evaluate(parse(formula));
  return <output>{result}</output>;
}

This function is neither a component nor a hook, so the compiler never sees it:

example.jsxNo problems
function run(formula) {
  return eval(formula);
}

When not to use it#

If you don't use the React Compiler, a skipped component costs you nothing.