🧩 Day 37 — React Patterns: Compound Components, Render Props & HOCs

As React apps grow, managing component logic efficiently becomes crucial. Today, we’ll explore three advanced patterns — Compound Components, Render Props, and Higher-Order Components (HOCs).

🔹 Compound Components

They let multiple components work together while sharing implicit state.

function Toggle({ children }) {
  const [on, setOn] = React.useState(false);
  return React.Children.map(children, child =>
    React.cloneElement(child, { on, setOn })
  );
}

Toggle.On = ({ on, children }) => on ? children : null;
Toggle.Off = ({ on, children }) => (on ? null : children);
Toggle.Button = ({ on, setOn }) => (
  <button onClick={() => setOn(!on)}>{on ? "ON" : "OFF"}</button>
);
  

This allows clean and flexible API design for shared logic.

💡 Render Props

Pass a function as a child to share reusable logic.

function MouseTracker({ render }) {
  const [pos, setPos] = React.useState({ x: 0, y: 0 });
  return (
    <div onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}>
      {render(pos)}
    </div>
  );
}
  

🏗 Higher-Order Components (HOCs)

A HOC is a function that takes a component and returns a new one, enhancing its behavior.

function withLogger(WrappedComponent) {
  return function Enhanced(props) {
    console.log("Props:", props);
    return <WrappedComponent {...props} />;
  };
}
  

Understanding these patterns helps build reusable and scalable React components that maintain clarity and flexibility.

← Prev Next →