Validates against syntax that React Compiler does not support. If you need to, you can still use this syntax outside of React, such as in a standalone utility function.
Rule Details
React Compiler needs to statically analyze your code to apply optimizations. Features likeeval andwith make it impossible to statically understand what the code does at compile time, so the compiler can’t optimize components that use them.
Invalid
Examples of incorrect code for this rule:
// ❌ Using eval in component
functionComponent({code}){
constresult =eval(code);// Can't be analyzed
return<div>{result}</div>;
}
// ❌ Using with statement
functionComponent(){
with(Math){// Changes scope dynamically
return<div>{sin(PI /2)}</div>;
}
}
// ❌ Dynamic property access with eval
functionComponent({propName}){
constvalue =eval(`props.${propName}`);
return<div>{value}</div>;
}Valid
Examples of correct code for this rule:
// ✅ Use normal property access
functionComponent({propName,props}){
constvalue =props[propName];// Analyzable
return<div>{value}</div>;
}
// ✅ Use standard Math methods
functionComponent(){
return<div>{Math.sin(Math.PI /2)}</div>;
}Troubleshooting
I need to evaluate dynamic code
You might need to evaluate user-provided code:
// ❌ Wrong: eval in component
functionCalculator({expression}){
constresult =eval(expression);// Unsafe and unoptimizable
return<div>Result:{result}</div>;
}Use a safe expression parser instead:
// ✅ Better: Use a safe parser
import{evaluate}from'mathjs';// or similar library
functionCalculator({expression}){
const[result,setResult] =useState(null);
constcalculate =()=>{
try{
// Safe mathematical expression evaluation
setResult(evaluate(expression));
}catch(error){
setResult('Invalid expression');
}
};
return(
<div>
<buttononClick={calculate}>Calculate</button>
{result &&<div>Result:{result}</div>}
</div>
);
}Note
Never useeval with user input - it’s a security risk. Use dedicated parsing libraries for specific use cases like mathematical expressions, JSON parsing, or template evaluation.