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

This error means a component keeps re-rendering endlessly because state is being set directly in the render body or an event handler calls setState immediately without user interaction. Fix it by ensuring setState calls are inside event handler callbacks or useEffect hooks, never at the top level of the component body.

Reading the Stack Trace

Here's what each line means:

• at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18): React detects the render loop here and throws after exceeding the maximum render count.
• at updateFunctionComponent (node_modules/react-dom/cjs/react-dom.development.js:19588:20): The function component is being re-rendered because setState was called during the render phase.
• at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5): React's synchronous work loop keeps processing the same component because each render triggers another setState.

Common Causes

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

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

export default function DataLoader() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('/api/data').then(r => r.json()).then(setData);
  });
  return <pre>{JSON.stringify(data)}</pre>;
}

The Fix

Remove the parentheses after handleClick in the onClick prop. Passing handleClick without parentheses passes the function reference as a callback. With parentheses, the function is called immediately during render, setting state and triggering the infinite loop.

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

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

Testing the Fix

import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

describe('Counter', () => {
  it('renders without infinite loop', () => {
    render(<Counter />);
    expect(screen.getByText('Count: 0')).toBeInTheDocument();
  });

  it('increments count on click', () => {
    render(<Counter />);
    fireEvent.click(screen.getByRole('button'));
    expect(screen.getByText('Count: 1')).toBeInTheDocument();
  });

  it('increments multiple times', () => {
    render(<Counter />);
    const button = screen.getByRole('button');
    fireEvent.click(button);
    fireEvent.click(button);
    expect(screen.getByText('Count: 2')).toBeInTheDocument();
  });
});

Run your tests:

npm test

Pushing Through CI/CD

git checkout -b fix/react-infinite-render-loop,git add src/components/Counter.tsx src/components/__tests__/Counter.test.tsx,git commit -m "fix: pass function reference instead of calling it in onClick",git push origin fix/react-infinite-render-loop

Your CI config should look something like this:

name: CI
on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm test -- --coverage
      - run: npm run build

The Full Manual Process: 18 Steps

Here's every step you just went through to fix this one bug:

1. Notice the error alert or see it in your monitoring tool
2. Open the error dashboard and read the stack trace
3. Identify the file and line number from the stack trace
4. Open your IDE and navigate to the file
5. Read the surrounding code to understand context
6. Reproduce the error locally
7. Identify the root cause
8. Write the fix
9. Run the test suite locally
10. Fix any failing tests
11. Write new tests covering the edge case
12. Run the full test suite again
13. Create a new git branch
14. Commit and push your changes
15. Open a pull request
16. Wait for code review
17. Merge and deploy to production
18. Monitor production to confirm the error is resolved

Total time: 30-60 minutes. For one bug.

npm install bugstack-sdk

import { initBugStack } from 'bugstack-sdk'

initBugStack({ apiKey: process.env.BUGSTACK_API_KEY })

Deploying the Fix (Manual Path)

1. Run the test suite locally to confirm no infinite render loop occurs.
2. Open a pull request with the event handler fix.
3. Wait for CI checks to pass on the PR.
4. Have a teammate review and approve the PR.
5. Merge to main and verify stable rendering in staging.

Frequently Asked Questions