react-hooks-js/unsupported-syntax

Validates against syntax that we do not plan to support in React Compiler

• Category: React Compiler
• Severity: error
• Source: eslint-plugin-react-hooks
• Framework: global
• Enabled when: eslint-plugin-react-hooks v6+ installed AND React Compiler detected in project
• Documentation: https://react.dev/reference/eslint-plugin-react-hooks/lints/unsupported-syntax

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Fires on syntax the Compiler permanently will not support — eval(...), with (...) {}, and the Function constructor — when used inside a component or hook. Both prevent any static analysis. False positive: the call sits in a non-component utility module the Compiler already skips (in that case the warning typically should not appear).

Fix prompt

Use this once validation confirms the diagnostic is real.

Replace eval with bracket access (props[name] instead of eval('props.' + name)), JSON.parse for serialized data, or a dedicated expression parser like mathjs for arithmetic. Delete with statements and reference properties explicitly (Math.sin instead of with (Math) { sin(...) }). The legacy syntax has been discouraged for decades and modern equivalents exist for every use case. See https://react.dev/reference/eslint-plugin-react-hooks/lints/unsupported-syntax

Related rules

More React Compiler rules from the rules reference:

• react-hooks-js/use-memo: Validates usage of the useMemo() hook against common mistakes. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.
• react-hooks-js/void-use-memo: Validates that useMemos always return a value and that the result of the useMemo is used by the component/hook. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.
• react-hooks-js/component-hook-factories: Deprecated: this rule has been removed in 7.1.0.
• react-hooks-js/error-boundaries: Validates usage of error boundaries instead of try/catch for errors in child components
• react-hooks-js/globals: Validates against assignment/mutation of globals during render, part of ensuring that [side effects must render outside of render](https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)