Fix React Too Many Re-Renders Error (2026)

React’s reconciliation process got stuck in a loop, repeatedly re-rendering the same component without making any actual changes to the DOM.

Here are the common culprits and how to fix them:

1. State Updates in useEffect Without Dependency Array

Diagnosis: You have a useEffect hook that calls setState inside it, but you haven’t provided an empty dependency array ([]). This causes the effect to run after every render, which updates state, triggering another render, and so on.
Cause: When a useEffect runs without a dependency array, it executes after every single render. If that effect updates state, it will cause a new render, which then triggers the useEffect again, creating an infinite loop.

Fix: Add an empty dependency array to your useEffect if the effect should only run once after the initial mount, or include specific dependencies if the effect should re-run when those values change.

// Incorrect (infinite loop)
useEffect(() => {
  setMyState('initialValue');
});

// Correct (runs once on mount)
useEffect(() => {
  setMyState('initialValue');
}, []);

// Correct (runs when someProp changes)
useEffect(() => {
  setMyState(someProp);
}, [someProp]);

Why it works: The dependency array tells React when to re-run the effect. An empty array means "only run this once after the very first render."

2. Passing New Function/Object References on Every Render

Diagnosis: You’re passing a new function or object as a prop to a child component on every render of the parent. If the child component memoizes its props (e.g., with React.memo) or uses useEffect with those props as dependencies, it will re-render unnecessarily.
Cause: JavaScript functions and objects are compared by reference. If you create a new function or object on each render, even if their content is identical, React sees them as different and triggers re-renders in child components that rely on these props.

Fix: Memoize functions with useCallback and objects with useMemo in the parent component.

// Parent Component
const handleClick = useCallback(() => {
  console.log('Clicked!');
}, []); // Empty dependency array means this function reference never changes

const myObject = useMemo(() => ({
  id: 1,
  name: 'Example'
}), []); // Empty dependency array means this object reference never changes

return <ChildComponent onClick={handleClick} data={myObject} />;

// Child Component (using React.memo for optimization)
const ChildComponent = React.memo(({ onClick, data }) => {
  // ... component logic
});

Why it works: useCallback and useMemo ensure that the function or object reference remains stable across renders as long as their dependencies don’t change, preventing unnecessary re-renders in memoized children.

3. Incorrectly Using useState Initializer

Diagnosis: You’re calling a function to determine the initial state inside useState, and that function is computationally expensive or itself triggers state updates.
Cause: useState can accept a function as its initial value. This function is only executed during the initial render. However, if this function accidentally calls a state setter, it will cause a re-render, and if not handled carefully, can lead to a loop. More commonly, if the function is complex and called repeatedly, it might be perceived as a re-render issue even if it’s just slow initialization.

Fix: Ensure your useState initializer function is pure and doesn’t have side effects or trigger state updates. If it’s complex, consider moving the computation to useMemo or performing it outside the component if it’s truly static.

// Potentially problematic if computeExpensiveValue() has side effects or is slow
const [data, setData] = useState(() => computeExpensiveValue());

// Safer if computeExpensiveValue() is pure and fast
const [data, setData] = useState(computeExpensiveValue());

Why it works: The initializer function should only run once. If it’s causing issues, it’s usually due to side effects or unexpected behavior within that function itself.

4. Context API Updates Triggering Re-renders

Diagnosis: A component consumes context, and the context value changes frequently. This causes the consuming component to re-render, even if it only uses a small part of the context value.
Cause: When a context value changes, all components that consume that context will re-render by default. If your context object contains multiple disparate pieces of state, and one piece changes, components that only care about other pieces will still re-render.

Fix:

Split Contexts: Break down large contexts into smaller, more specific ones.
Memoize Context Value: Use useMemo to memoize the context value object.
Consumer Components with React.memo: Wrap your consuming components with React.memo and, if necessary, provide a custom arePropsEqual function.
Use useContextSelector (if using a library like Zustand or Jotai, or a custom hook): This pattern allows you to subscribe only to specific parts of the context.

// Example with splitting context
const UserContext = React.createContext();
const SettingsContext = React.createContext();

// In your provider:
const [user, setUser] = useState({ name: 'Alice', theme: 'dark' });

const userValue = useMemo(() => ({ name: user.name }), [user.name]);
const themeValue = useMemo(() => ({ theme: user.theme }), [user.theme]);

return (
  <UserContext.Provider value={userValue}>
    <SettingsContext.Provider value={themeValue}>
      {children}
    </SettingsContext.Provider>
  </UserContext.Provider>
);

// In consuming component:
const { name } = useContext(UserContext); // Only re-renders when name changes

Why it works: By splitting contexts or memoizing values, you reduce the surface area for changes that trigger re-renders. Components then only re-render when the specific piece of context they care about actually changes.

5. Infinite Loops in Event Handlers

Diagnosis: An event handler in a component calls a state update, and that state update somehow triggers the same event handler again. This is less common but can happen with complex event propagation or custom DOM event listeners.
Cause: A direct or indirect cycle where an event triggers a state update, which in turn causes the same event to be re-dispatched or re-triggered, leading to an infinite loop.
Fix: Carefully review your event handling logic. Use event.stopPropagation() or event.stopImmediatePropagation() if event bubbling is the issue. Ensure state updates within event handlers don’t inadvertently cause the same handler to be called again. Consider debouncing or throttling handlers if they can be fired too rapidly.
```
// Example: Prevent a button click from triggering itself if wrapped in another clickable element
const handleClick = (e) => {
  e.stopPropagation(); // Stop the event from bubbling up
  setCount(prevCount => prevCount + 1);
};
```
Why it works: Preventing event propagation or ensuring state updates don’t re-trigger the same event breaks the feedback loop.

6. Incorrectly Applied shouldComponentUpdate or PureComponent

Diagnosis: If you’re using class components or have implemented shouldComponentUpdate, you might have faulty logic that always returns true, causing unnecessary re-renders, or React.PureComponent might be comparing props/state incorrectly due to reference equality issues (see point 2).
Cause: shouldComponentUpdate is a lifecycle method that lets you control re-renders. If it returns true too often, you get re-renders. React.PureComponent does a shallow comparison of props and state. If any prop or state value is an object or function whose reference changes on every render (even if the content is the same), PureComponent will see it as a change and re-render.
Fix: Ensure your shouldComponentUpdate logic is correct and only returns true when a re-render is actually necessary. For PureComponent or React.memo with functional components, ensure you’re memoizing object and function props as described in point 2.
```
// Example of correct shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState) {
  // Only re-render if the 'id' prop has changed
  return this.props.id !== nextProps.id;
}
```
Why it works: Explicitly defining when a component should update prevents unnecessary re-renders, while proper memoization ensures shallow comparisons work as intended.

The next error you’ll likely encounter is a "Maximum update depth exceeded" error, which is React’s way of saying it’s detected an infinite re-render loop and has stopped it to prevent a crash.