hardFrontend

How do you avoid re-renders with composition instead of memoization?

Q: How do you avoid re-renders with composition instead of memoization?

**Core concept (TL;DR).** If a component holds state but also renders an expensive subtree that doesn't depend on that state, pass the subtree in as children (or a prop). Because the element is created by the **parent above the state**, its reference stays the same across the stateful component's renders — so React skips re-rendering it, **without any memo **. Stable children element → React reuses it <text x="260" y="60" fill="#8b5cf6" font-size="10" font-weight="700" tex

921 views

Understand the problem

Using the children prop to isolate frequently-changing state.

reactperformancecomposition

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Explore the playground snippets

children as a prop isolates re-renders

Run Playground

import { useState, useRef } from 'react';

function Expensive() {
  const renders = useRef(0);
  renders.current++;
  return <p>Expensive subtree rendered <b>{renders.current}</b> time(s)</p>;
}

function Toggle({ children }) {
  const [on, setOn] = useState(false);
  return (
    <div>
      <button onClick={() => setOn((o) => !o)}>{on ? 'On' : 'Off'}</button>
      {children}  {/* created by the parent — not re-rendered when `on` flips */}
    </div>
  );
}

export default function App() {
  return (
    <div style={{ fontFamily: 'sans-serif', padding: 24 }}>
      <Toggle>
        <Expensive />
      </Toggle>
      <p style={{ color: '#666' }}>Toggling does NOT re-render Expensive — no memo, just composition.</p>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you optimize React component rendering?

What is `useDeferredValue` and how does it differ from debouncing?