React Render Props Explained — Sharing Code with Render Props Pattern

In this tutorial, you will learn about React Render Props Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

React render props is a pattern where a component's prop is a function that returns JSX, letting the component share its internal state or behavior with the calling component.

What You'll Learn

• What the render props pattern is
• How to create components with render props
• How render props differ from children and HOCs
• When to use render props vs hooks

Why It Matters

Render props give components complete control over rendering while the parent provides behavior. This pattern is commonly used in data-fetching, form, and animation libraries.

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

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

  return render(position);
}

function App() {
  return (
    <MouseTracker render={({ x, y }) => (
      <div style={{ height: "100vh" }}>
        <h1>Mouse position: {x}, {y}</h1>
      </div>
    )} />
  );
}

Expected output: The mouse position displays and updates as the user moves. The MouseTracker provides the data, the parent controls rendering.