unsupported-syntax
Validates against syntax that React Compiler does not support.
Full Name in eslint-plugin-react-x
react-x/unsupported-syntaxFull Name in @eslint-react/eslint-plugin
@eslint-react/unsupported-syntaxPresets
x
recommended
recommended-typescript
recommended-type-checked
strict
strict-typescript
strict-type-checked
Rule Details
React Compiler needs to statically analyze your code to apply optimizations. Features like eval, with, and immediately-invoked function expressions (IIFEs) in JSX make it impossible or impractical for the compiler to statically understand what the code does at compile time, so the compiler can't optimize components that use them.
This rule checks for the following unsupported patterns:
eval— Dynamic code evaluation cannot be statically analyzed.withstatements — Dynamically changes scope, preventing static analysis.- IIFEs in JSX — Immediately-invoked function expressions within JSX elements or fragments will not be optimized by React Compiler.
Examples
Using eval in components
eval executes code dynamically at runtime, making it impossible for any static analysis tool to understand what variables are accessed or modified.
// Problem: using eval in a component
function Component({ code }) {
const result = eval(code); // cannot be statically analyzed
return <div>{result}</div>;
}// Recommended: use analyzable property access
function Component({ propName, props }) {
const value = props[propName]; // statically analyzable
return <div>{value}</div>;
}// Recommended: using eval outside components and hooks is fine
function notAComponent() {
const result = eval("1 + 2");
return result;
}Using with statements
The with statement dynamically modifies the scope chain at runtime. Static analysis tools cannot predict which identifiers refer to which objects inside a with block.
// Problem: using with in a component
function Component() {
with (Math) { // dynamically changes scope
return <div>{sin(PI / 2)}</div>;
}
}// Recommended: use standard method calls
function Component() {
return <div>{Math.sin(Math.PI / 2)}</div>;
}IIFEs in JSX
Immediately-invoked function expressions inside JSX prevent the compiler from analyzing the component's output structure at build time.
// Problem: using IIFE in JSX
function MyComponent() {
return (
<SomeJsx>
{(() => { // Avoid using immediately-invoked function expressions in JSX. IIFEs will not be optimized by React Compiler.
const filteredThings = things.filter(callback);
if (filteredThings.length === 0) {
return <Empty />;
}
return filteredThings.map((thing) => <Thing key={thing.id} data={thing} />);
})()}
</SomeJsx>
);
}// Recommended: extract logic into variables outside JSX
function MyComponent() {
const thingsList = (() => {
const filteredThings = things.filter(callback);
if (filteredThings.length === 0) {
return <Empty />;
}
return filteredThings.map((thing) => <Thing key={thing.id} data={thing} />);
})();
return (
<SomeJsx>
{thingsList}
</SomeJsx>
);
}// Recommended: use useMemo instead of IIFE
function MyComponent() {
const thingsList = useMemo(() => {
const filteredThings = things.filter(callback);
if (filteredThings.length === 0) {
return <Empty />;
}
return filteredThings.map((thing) => <Thing key={thing.id} data={thing} />);
}, [things, callback]);
return (
<SomeJsx>
{thingsList}
</SomeJsx>
);
}// Recommended: use ternary or logical expressions
function MyComponent() {
return (
<div>
{loading ? <Spinner /> : error ? <Error /> : <Content />}
</div>
);
}Evaluating dynamic expressions safely
If you need to evaluate user-provided code, use a safe expression parser instead of eval.
// Recommended: use a safe parsing library
import { evaluate } from 'mathjs';
function Calculator({ expression }) {
const [result, setResult] = useState(null);
const calculate = () => {
try {
setResult(evaluate(expression));
} catch (error) {
setResult('Invalid expression');
}
};
return (
<div>
<button onClick={calculate}>Calculate</button>
{result && <div>Result: {result}</div>}
</div>
);
}Note: Never use
evalwith user input — it's a security risk. Use dedicated parsing libraries for specific use cases like mathematical expressions, JSON parsing, or template evaluation.
Versions
Resources
Further Reading
See Also
react-x/purity
Validates that components and hooks are pure by checking that they do not call known-impure functions during render.