Fixing Infinite Re-renders When You Pass Object Literals as React Props

Your component re-renders, passes an object literal as a prop, the child re-renders, triggers a useEffect, updates state, and the whole thing starts over. Within milliseconds your browser tab is frozen and the console is screaming Too many re-renders. The culprit is almost always a reference equality problem with an object you created inline.

This is one of those bugs that looks completely innocent in the code but causes catastrophic runtime behavior. Understanding the exact mechanism makes it trivially easy to fix — and to avoid in the future.

What you'll learn

• Why JavaScript reference equality makes inline objects dangerous as props
• How React's re-render cycle turns a single object literal into an infinite loop
• Five concrete fixes ranked by situation: moving objects outside components, useMemo, useRef, flattening props, and React.memo
• The common mistakes that keep the loop alive even after you think you've fixed it

The Root Cause: Reference Equality in JavaScript

JavaScript compares objects by reference, not by value. Two objects that look identical are not equal unless they point to the same place in memory.

const a = { color: 'red' };
const b = { color: 'red' };

console.log(a === b); // false — different references
console.log(a === a); // true  — same reference

This is not a React quirk. It is how JavaScript works at its core. React simply exposes the consequences more dramatically than most code you write day-to-day.

How React Decides to Re-render

When a parent component re-renders, React calls the parent function again from top to bottom. It then compares each prop it is about to pass to a child against the prop it passed on the previous render. The comparison is a strict equality check (===) on the prop value itself.

For primitives like strings and numbers, this is fine. 'red' === 'red' is always true. But for objects, React is comparing references, and a brand-new object literal created inside the render function gets a brand-new reference every single time.

If the child component has a useEffect that lists that object in its dependency array, React sees a new object on every render and fires the effect every render. If that effect sets state, the parent re-renders again — and so it goes, forever. You can read more about how React's development mode adds another layer to this problem in this breakdown of why useEffect fires twice in dev but once in production.

Why Object Literals Are the Silent Culprit

The dangerous pattern looks completely natural, which is why it catches so many developers off guard.

function ParentComponent() {
  const [count, setCount] = React.useState(0);

  return (
    <ChildComponent
      config={{ theme: 'dark', size: 'large' }} {/* new object every render */}
      onClick={() => setCount(c => c + 1)}
    />
  );
}

function ChildComponent({ config, onClick }) {
  React.useEffect(() => {
    console.log('config changed:', config);
    // do something with config...
  }, [config]); // fires every render because config is always a new reference

  return <button onClick={onClick}>Click</button>;
}

Every time ParentComponent renders — for any reason — it creates a new { theme: 'dark', size: 'large' } object. Even though the values are identical, the reference is new. React dutifully fires the useEffect, and if that effect triggers a state update anywhere up the tree, you have your loop.

The same problem applies to inline arrays ([]), inline functions (() => {}), and inline class instances. Anything that gets constructed fresh inside a render function body.

Spotting the Infinite Loop in Practice

React will throw Error: Too many re-renders. React limits the number of renders to prevent an infinite loop when it detects the problem synchronously. But often the loop is more subtle — the component keeps re-rendering at high frequency without crashing, burning CPU cycles and making the UI sluggish.

To diagnose it, open React DevTools and use the Profiler tab. Enable