✅ What is the Render Prop Pattern in React?

The Render Prop pattern in React is a technique for sharing reusable logic between components using a prop whose value is a function. Instead of the provider component deciding what to render, it delegates rendering to a function supplied by the consumer.

This makes the pattern extremely flexible — you can pass data, state, or behavior to the render prop function and let the consumer decide the UI. Before React Hooks, this was the most idiomatic way to reuse logic across components.

🚀 Why Use Render Props?

✅ Share stateful behavior (mouse position, toggles, fetching data, etc.).
✅ Gives UI control to the consumer, making components more reusable.
✅ More flexible than HOCs (Higher-Order Components).
✅ Still useful when you need to pass state into JSX children.

🧩 Syntax Variants

Variant	Example
Render Prop (explicit prop)	`<Provider render={data => <UI data={data} />} />`
Function as Child	`<Provider>{data => <UI data={data} />}</Provider>`

🔧 Example 1: Mouse Tracker (Class Component)

import React from "react";

class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };

  handleMove = (e) => {
    this.setState({ x: e.clientX, y: e.clientY });
  };

  componentDidMount() {
    window.addEventListener("mousemove", this.handleMove);
  }

  componentWillUnmount() {
    window.removeEventListener("mousemove", this.handleMove);
  }

  render() {
    return this.props.render(this.state);
  }
}

// Usage
function App() {
  return (
    <MouseTracker render={({ x, y }) => (
      <div>
        <h2>Mouse position</h2>
        <p>X: {x}, Y: {y}</p>
      </div>
    )} />
  );
}

Here, MouseTracker manages the mouse logic, while the consumer defines the UI using the render prop.

🔄 Example 2: Mouse Tracker (Hooks + Function as Child)

import React, { useState, useEffect } from "react";

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

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

  return children(pos);
}

// Usage
function App() {
  return (
    <MouseTracker>
      {({ x, y }) => (
        <div>
          <h2>Mouse position (hooks)</h2>
          <p>{x}, {y}</p>
        </div>
      )}
    </MouseTracker>
  );
}

📡 Example 3: DataFetcher with Render Prop

import React, { useEffect, useState } from "react";

function DataFetcher({ url, children }) {
  const [state, setState] = useState({ loading: true, data: null, error: null });

  useEffect(() => {
    const controller = new AbortController();
    setState({ loading: true, data: null, error: null });

    fetch(url, { signal: controller.signal })
      .then((r) => {
        if (!r.ok) throw new Error("HTTP " + r.status);
        return r.json();
      })
      .then((data) => setState({ loading: false, data, error: null }))
      .catch((err) => {
        if (err.name === "AbortError") return;
        setState({ loading: false, data: null, error: err });
      });

    return () => controller.abort();
  }, [url]);

  return children(state); // { loading, data, error }
}

// Usage
function UsersList() {
  return (
    <DataFetcher url="/api/users">
      {({ loading, data, error }) => {
        if (loading) return <div>Loading…</div>;
        if (error) return <div>Error: {error.message}</div>;
        return <ul>{data.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
      }}
    </DataFetcher>
  );
}

⚡ Hooks Alternative

Today, the same logic can often be expressed more cleanly with a custom hook. For example, here’s a useMouse hook equivalent of the Mouse Tracker:

import { useState, useEffect } from "react";

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

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

  return pos;
}

// Usage
function App() {
  const { x, y } = useMouse();
  return <div>Mouse: {x}, {y}</div>;
}

✅ Best Practices

Keep render prop functions pure and fast.
Be consistent — pick render prop or children as function style.
Use hooks when possible, but prefer render props when passing state into arbitrary JSX.
Don’t nest too many render props (can cause “callback hell”).

🧾 Conclusion

The Render Prop pattern is a powerful way to share reusable behavior in React. While hooks are the modern standard for code reuse, render props remain valuable when you want to let the consumer decide how UI should look. Used wisely, they make components flexible, testable, and highly reusable.

Render Prop Pattern in React: Explained with Examples