# react-hooks/unsupported-syntax

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

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.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

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

{/* End of the generated section. */}

## Examples

Reported:

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

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

Not reported:

{/* good */}
```jsx
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:

{/* good */}
```jsx
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.