What are render props in React?

Short answer

A render prop is a function prop that a component calls to determine what to render. It is a technique for sharing logic without using higher-order components.

How it works

The parent component encapsulates state or behavior and exposes it to the child via the function parameter. The child decides how to render based on that data.

Example

function MouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  return (
    <div onMouseMove={(e) => setPosition({ x: e.clientX, y: e.clientY })}>
      {render(position)}
    </div>
  );
}

function App() {
  return (
    <MouseTracker render={({ x, y }) => (
      <p>Mouse is at {x}, {y}</p>
    )} />
  );
}

Why it matters

Render props solve the same problem as HOCs but are often more explicit and composable. Modern React typically replaces render props with custom hooks, but understanding the pattern is still valuable for reading legacy code.