React Reconciliation: Why Inline Components Break and Render Functions Don't

Why I Looked Into This

I was debugging a slidedown animation that wasn't working properly in my app. The animation would break randomly, and I couldn't figure out why. After hours of debugging, I discovered the culprit: I was defining components inline inside the parent component. The unnecessary re-renders from this pattern were breaking my animations. Once I understood the difference between inline components and render functions, everything clicked.

How React Identifies Components

When React renders your components, it needs to track them across re-renders to optimize performance. When you write a component tag, React uses the component function itself as the type for comparison. React's virtual DOM stores the component type along with its props, using the actual function reference.

During reconciliation, React compares component types using reference equality. With a properly defined component outside the parent, this reference stays constant. But with an inline component—defined inside the parent's function body—every render creates a new function at a new memory address. React sees the function from the previous render and the function from the current render as completely different types. This breaks memoization, can reset component state, and interrupts animations.

// ❌ Bad: Inline component - new function reference every render
const Parent = () => {
  const InlineChild = () => <div>Hi</div>;
  return <InlineChild />;
};

// ✅ Good: Component defined outside
const Child = () => <div>Hi</div>;
const Parent = () => {
  return <Child />;
};

Why Render Functions Work

Render functions sidestep this problem through a clever trick: they're invisible to React's reconciliation algorithm. When you define a render function and call it immediately, React never sees the function itself in the component tree.

The function executes immediately during render, returning JSX that gets compiled to React's createElement calls. React's virtual DOM stores the actual element type as a string, not the function. On subsequent renders, even though a new render function is created in memory, React only compares the string element types, which are always identical.

// ✅ Good: Render function - React only sees the "div"
const Parent = () => {
  const renderChild = () => <div>Hi</div>;
  return <div>{renderChild()}</div>;
};

The Visual Difference

When the parent re-renders, React's fiber tree for an inline component shows a new function reference with a different memory address each time, while the render function result shows the same element type string. React compares types first—if they match, it diffs efficiently; if they differ, it may rebuild. With inline components, the type changes every render. With render functions, the type never changes.

const Parent = () => {
  const InlineChild = () => <div>Hi</div>;
  const renderChild = () => <div>Hi</div>;
  
  return (
    <div>
      <InlineChild />  {/* React sees: { type: InlineChild@0x002 } */}
      {renderChild()}  {/* React sees: { type: "div" } */}
    </div>
  );
};

Key Takeaway

The fix is simple: avoid defining components inside other components. If you need JSX that accesses parent scope, use a render function and call it inline. Better yet, extract it to a proper component and pass data via props. While both patterns create new functions every render, only inline components expose those references to React's reconciliation algorithm. Render functions hide the implementation detail, letting React see only the stable element types they return.