Render Props

Introduction

In the previous lesson, you saw Higher-Order Components used to share logic between components by wrapping them. Render props is a second, closely related pattern that solves the exact same problem — reusing logic — but does so through composition rather than wrapping.

Instead of a function that returns a new component, a render prop component takes a function as a prop and calls that function to determine what to render. This keeps everything visible in a single JSX tree, rather than hidden inside a wrapper.

What are Render Props?

A render prop is a prop whose value is a function, and which the component calls during rendering to know what JSX to produce. Rather than hardcoding its own output, the component provides some data (or behavior) and lets the caller decide how to display it.

function DataProvider({ render }) {
  const data = useSomeData();
  return render(data); // calling the function prop
}

// Usage:
<DataProvider render={(data) => <p>{data}</p>} />

Building a MouseTracker

A classic example is a component that tracks the mouse position and shares it via a render prop, letting different consumers decide how to display that position.

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

  function handleMouseMove(event) {
    setPos({ x: event.clientX, y: event.clientY });
  }

  return (
    <div onMouseMove={handleMouseMove} style={{ height: "200px" }}>
      {render(pos)}
    </div>
  );
}

Now any consumer can render the mouse position however it wants, without MouseTracker knowing or caring about the presentation:

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

The mouse is at (128, 64)

(updates continuously as the mouse moves)

Using children as a Function

A common variation passes the function as children instead of a named render prop. This reads a little more naturally in JSX, since the function is written between the opening and closing tags.

function MouseTracker({ children }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });

  function handleMouseMove(event) {
    setPos({ x: event.clientX, y: event.clientY });
  }

  return (
    <div onMouseMove={handleMouseMove} style={{ height: "200px" }}>
      {children(pos)}
    </div>
  );
}

// Usage:
<MouseTracker>
  {(pos) => <p>{pos.x}, {pos.y}</p>}
</MouseTracker>

Render Props vs HOCs vs Hooks

HOCs, render props, and custom Hooks all exist to solve the same core problem: sharing stateful logic between components without duplicating code. They differ mainly in how that sharing is expressed.

Custom Hooks are now generally preferred because they let you reuse logic without adding any extra components to the tree at all — you simply call a function and get values back, directly inside the component that needs them.

function useMousePosition() {
  const [pos, setPos] = useState({ x: 0, y: 0 });

  useEffect(() => {
    function handleMouseMove(event) {
      setPos({ x: event.clientX, y: event.clientY });
    }
    window.addEventListener("mousemove", handleMouseMove);
    return () => window.removeEventListener("mousemove", handleMouseMove);
  }, []);

  return pos;
}

function App() {
  const pos = useMousePosition();
  return <p>{pos.x}, {pos.y}</p>;
}

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Render props let a component share logic by handing control of rendering to a function passed in as a prop, as shown by the MouseTracker example. You compared this to Higher-Order Components and to custom Hooks, the modern preferred approach.

Next, you will look at React.memo, a tool for skipping unnecessary re-renders of components whose props have not changed.