Component Composition Patterns

Composition Over Memoization

The most elegant React performance solutions don't use memo, useMemo, or useCallback. They use composition — structuring components so that the component boundary itself prevents unnecessary re-renders.

// PROBLEM: ExpensiveTree re-renders every second
function App() {
  const [time, setTime] = useState(Date.now());

  useEffect(() => {
    const id = setInterval(() => setTime(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <div>
      <Clock time={time} />
      <ExpensiveTree />  {/* Re-renders every second — WASTED */}
    </div>
  );
}

// SOLUTION: Move time state into Clock, pass ExpensiveTree as children
function App() {
  return (
    <ClockWrapper>
      <ExpensiveTree />  {/* Created here, never re-renders from clock */}
    </ClockWrapper>
  );
}

function ClockWrapper({ children }) {
  const [time, setTime] = useState(Date.now());
  useEffect(() => {
    const id = setInterval(() => setTime(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <div>
      <Clock time={time} />
      {children}  {/* Same reference — React skips reconciliation */}
    </div>
  );
}

No imports added. No performance APIs used. Just moved the boundary.

The Mental Model

Pattern 1: Children as Props

The simplest composition pattern. Pass expensive components as children to a stateful wrapper:

// The stateful wrapper re-renders, but children don't
function AnimatedContainer({ children }) {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{ transform: isHovered ? 'scale(1.02)' : 'scale(1)' }}
    >
      {children}
    </div>
  );
}

// Usage: heavy content passed from stable parent
function ProductPage() {
  return (
    <AnimatedContainer>
      {/* These are created by ProductPage, not AnimatedContainer */}
      {/* When AnimatedContainer re-renders on hover, these are the */}
      {/* same element references — React skips their reconciliation */}
      <ProductImages />
      <ProductDetails />
      <ReviewSection />
    </AnimatedContainer>
  );
}

Pattern 2: Render Props

When the parent needs to pass dynamic data to the children:

// The children need access to the mouse position
function MouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = useCallback((e) => {
    setPosition({ x: e.clientX, y: e.clientY });
  }, []);

  return (
    <div onMouseMove={handleMouseMove} style={{ height: '100vh' }}>
      {render(position)}
    </div>
  );
}

// Only Cursor and Coordinates re-render when mouse moves
// The rest of the page is unaffected
function App() {
  return (
    <div>
      <Header />
      <MouseTracker
        render={(pos) => (
          <>
            <Cursor x={pos.x} y={pos.y} />
            <Coordinates x={pos.x} y={pos.y} />
          </>
        )}
      />
      <Footer />
    </div>
  );
}

Pattern 3: Compound Components

Components that work together, sharing implicit state:

// Compound component — internal state shared via context
const AccordionContext = createContext(null);

function Accordion({ children }) {
  const [openId, setOpenId] = useState(null);
  const value = useMemo(() => ({ openId, setOpenId }), [openId]);

  return (
    <AccordionContext.Provider value={value}>
      <div role="region">{children}</div>
    </AccordionContext.Provider>
  );
}

function AccordionItem({ id, title, children }) {
  const { openId, setOpenId } = useContext(AccordionContext);
  const isOpen = openId === id;

  return (
    <div>
      <button onClick={() => setOpenId(isOpen ? null : id)}>
        {title} {isOpen ? '▲' : '▼'}
      </button>
      {isOpen && <div>{children}</div>}
    </div>
  );
}

// Usage: clean API, internal state management
function FAQ() {
  return (
    <Accordion>
      <AccordionItem id="q1" title="What is React?">
        <p>A JavaScript library for building user interfaces.</p>
      </AccordionItem>
      <AccordionItem id="q2" title="What is a component?">
        <p>A reusable, self-contained piece of UI.</p>
      </AccordionItem>
      <AccordionItem id="q3" title="What are hooks?">
        <p>Functions that let you use state in function components.</p>
      </AccordionItem>
    </Accordion>
  );
}

The performance benefit: clicking an accordion item only re-renders the items that change state (the one opening and the one closing). The content inside non-affected items doesn't re-render.

Pattern 4: Slot Props

Pass specific elements as named props instead of children:

function Layout({ header, sidebar, footer, children }) {
  const [sidebarOpen, setSidebarOpen] = useState(true);

  return (
    <div className="layout">
      {header}     {/* Stable reference from parent */}
      <div className="content">
        {sidebarOpen && sidebar}  {/* Stable reference */}
        <main>{children}</main>   {/* Stable reference */}
      </div>
      {footer}     {/* Stable reference */}
      <button onClick={() => setSidebarOpen(!sidebarOpen)}>
        Toggle Sidebar
      </button>
    </div>
  );
}

// All slot elements are created by App (stable parent)
// Toggling sidebar doesn't re-render Header, Footer, or main content
function App() {
  return (
    <Layout
      header={<Header />}
      sidebar={<Sidebar />}
      footer={<Footer />}
    >
      <Dashboard />
    </Layout>
  );
}

Toggling the sidebar re-renders Layout but not its slot props, because they were created by App (which didn't re-render).

Production Scenario: The Modal Performance Fix

A team has a modal that re-renders the entire page content behind it:

// BEFORE: page content re-renders when modal state changes
function Page() {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      <ExpensiveDataGrid />  {/* 500 rows — re-renders on modal toggle */}
      <Chart />              {/* Heavy SVG — re-renders on modal toggle */}
      <button onClick={() => setShowModal(true)}>Open</button>
      {showModal && <Modal onClose={() => setShowModal(false)} />}
    </div>
  );
}

// AFTER: composition isolates modal state
function Page() {
  return (
    <div>
      <ExpensiveDataGrid />
      <Chart />
      <ModalSection />  {/* Manages its own state */}
    </div>
  );
}

function ModalSection() {
  const [showModal, setShowModal] = useState(false);

  return (
    <>
      <button onClick={() => setShowModal(true)}>Open</button>
      {showModal && <Modal onClose={() => setShowModal(false)} />}
    </>
  );
}

Opening/closing the modal now only re-renders ModalSection. The data grid and chart are untouched.

When Composition Isn't Enough

Composition solves most re-render problems but not all:

// Composition can't help when state MUST be at the top
// and MUST be passed to many children as different props
function DataDashboard() {
  const [data, setData] = useState(null);  // 20 widgets need this
  const [filter, setFilter] = useState('all');  // Affects all widgets

  return (
    <>
      <FilterBar filter={filter} onChange={setFilter} />
      {widgets.map(w => (
        <Widget key={w.id} data={data} filter={filter} />
      ))}
    </>
  );
}

Here, composition can't separate data state from the widgets — they all need it. This is where React.memo on Widget (with stable props) or external state management (zustand with selectors) becomes the right tool.

Common Mistakes

Challenge

Challenge: Refactor using composition

// This component re-renders ExpensiveChart
// every time the user expands/collapses the panel.
// Refactor using composition to prevent this.
// Do NOT use React.memo.

function Dashboard() {
  const [panelOpen, setPanelOpen] = useState(true);
  const data = useChartData();

  return (
    <div>
      <button onClick={() => setPanelOpen(!panelOpen)}>
        `{panelOpen ? 'Collapse' : 'Expand'}` Panel
      </button>
      {panelOpen && (
        <div className="panel">
          <PanelContent />
        </div>
      )}
      <ExpensiveChart data={data} />
    </div>
  );
}

function Dashboard() {
  const data = useChartData();

  return (
    <div>
      <CollapsiblePanel>
        <PanelContent />
      </CollapsiblePanel>
      <ExpensiveChart data={data} />
    </div>
  );
}

function CollapsiblePanel({ children }) {
  const [panelOpen, setPanelOpen] = useState(true);

  return (
    <>
      <button onClick={() => setPanelOpen(!panelOpen)}>
        {panelOpen ? 'Collapse' : 'Expand'} Panel
      </button>
      {panelOpen && (
        <div className="panel">
          {children}
        </div>
      )}
    </>
  );
}

Quiz

Key Rules