react-hooks/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:

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

Examples#

Reported:

function Calculator({ formula }) {
  const result = eval(formula);
  return <output>{result}</output>;
}

function Calculator({ formula, onResult }) {
  return <button onClick={() => onResult(eval(formula))}>Run</button>;
}

Not reported:

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:

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.