Too many re-renders

What is Too many re-renders?

This error occurs when a React component executes a state update function (like `setCount` or `setOpen`) directly inside its main render body. In React, updating a state value tells the framework to schedule a new render cycle for that component. When this update is called unconditionally during rendering, it triggers another render, which triggers another update, resulting in an infinite loop. To prevent browser memory exhaustion, React halts execution and throws this error.

Common Causes

• Invoking State Setters in JSX Event Props: Passing direct function invocations to event props (e.g., `onClick={setCount(count + 1)}`) instead of passing function references (e.g., `onClick={() => setCount(count + 1)}`).
• Direct State Mutation in Component Bodies: Executing state updates unconditionally inside the main function body or render block of a component.
• Unconditional State Changes inside render paths: Changing state based on conditions checked during the render phase.

Common Mistakes

• Confusing function invocation (`onClick={setOpen(true)}`) with callback declaration (`onClick={() => setOpen(true)}`).
• Updating parent states unconditionally inside child components during mounting phases.

How to Fix

Framework-Specific Examples

import { useState } from 'react';

function BadProfile({ user }) {
  const [name, setName] = useState(user.name);
  
  // Wrong: re-setting name on every render
  setName(user.name);
  
  return <h1>{name}</h1>;
}

Best Practices

• Always check your event handlers for trailing parentheses (`()`) inside JSX tags.
• Ensure state update calls inside `useEffect` are guarded by dependency conditions.

Frequently Asked Questions (FAQ)