State Set During Render (ARCH3305)

Key typescript.react.set-state-during-render · Severity error · Category quality

React: flags a state setter called in the component body. Each call schedules another render, which calls it again.

Incorrect

function Cart({ lines }) {
  const [total, setTotal] = useState(0);
  setTotal(sum(lines));
  return <span>{total}</span>;
}

Correct

function Cart({ lines }) {
  const total = useMemo(() => sum(lines), [lines]);
  return <span>{total}</span>;
}