react-hooks/syntax

Disallow invalid JavaScript in components and hooks, such as assigning to a const

has suggestions

Also called react_hooks/syntax, react/syntax

Some mistakes parse fine and only fail when the code runs. The one you're likely to see here is an assignment to a const variable, which throws a TypeError when that line runs. The React Compiler catches it when it analyzes the component.

It also reports delete on something that isn't an object property, with a suggestion that removes the line.

The rule only looks at components and hooks. no-const-assign reports the same mistake in all code.

Configure#

Off by default. To turn it on:

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

Examples#

example.jsx1 problem
function Total({ items }) {
  const total = 0;
  total = items.length;
  return <span>{total}</span>;
}

The assignment can also be in a nested function:

example.jsx2 problems
function Total({ items }) {
  const total = 0;
  const update = () => {
    total = items.length;
  };
  return <span onClick={update}>{total}</span>;
}
example.jsxNo problems
function Total({ items }) {
  const total = items.length;
  return <span>{total}</span>;
}

This function is neither a component nor a hook, so the rule skips it:

example.jsxNo problems
function countItems(items) {
  const total = 0;
  total = items.length;
  return total;
}