The component that updates itself forever

Stop a render loop while preserving the counter behavior.

10 min/React state / effects / render diagnostics

Observe

Investigate

Fix

Verify

Reflect

Counter.jsx/jsx

01020304050607

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  setCount(count + 1);
  return <button>{count}</button>;
}

Terminal0 runs

Error: Too many re-renders. React limits the number of renders
to prevent an infinite loop.

Problem line: setCount(count + 1)
The state update runs during every render.