React Render Props

As React applications grow, multiple components often need to share common logic — like fetching data, handling mouse movements, or managing state.

Instead of duplicating that logic, React provides a pattern called Render Props, which allows you to share functionality between components in a clean and reusable way.

What is a Render Prop?

A Render Prop is a technique for sharing code between React components using a function that returns JSX.

It’s called a render prop because a prop is used to tell a component what to render.

Example:

• Let’s say you want to track mouse movements on the screen.
• Without render props, you might repeat the same logic in different components.
• With render props, you can share it easily.

import React, { useState } from "react";

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

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

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

function App() {
  return (
    <MouseTrackerrender={({ x, y }) => (
        <h3>
          Mouse position: ({x}, {y})
        </h3>
      )}
    />
  );
}

export default App;

• The MouseTracker component handles the logic for tracking mouse movement.
• Instead of deciding what to render itself, it calls the render() prop.
• The parent (App) defines how the data is displayed.

This keeps the logic reusable while allowing flexible UI rendering.

Why Use Render Props?

Render Props are great when you want to:

• Share logic between components
• Avoid duplicating stateful logic
• Allow flexible UI composition
• Separate logic (what happens) from presentation (how it looks)

Example 2: Sharing Logic for Data Fetching

Here’s how you can use render props to share data fetching functionality:

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

function DataFetcher({ url, render }) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((result) => {
        setData(result);
        setLoading(false);
      });
  }, [url]);

  return render({ data, loading });
}

function App() {
  return (
    <div>
      <h2>Render Props Example – Posts</h2>
      <DataFetcherurl="<https://jsonplaceholder.typicode.com/posts>"
        render={({ data, loading }) =>
          loading ? (
            <p>Loading...</p>
          ) : (
            <ul>
              {data.slice(0, 5).map((post) => (
                <li key={post.id}>{post.title}</li>
              ))}
            </ul>
          )
        }
      />
    </div>
  );
}

export default App;

How it works:

• The DataFetcher component contains the reusable data-fetching logic.
• It doesn’t render UI by itself — it delegates rendering to whatever is passed in the render prop.
• The App decides how the data should look.

Alternative Syntax – Using Children as a Function

Instead of using a render prop, you can use the children prop as a function.

This is another common pattern in React.

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

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

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

function App() {
  return (
    <MouseTracker>
      {({ x, y }) => (
        <p>
          Mouse coordinates: <strong>{x}, {y}</strong>
        </p>
      )}
    </MouseTracker>
  );
}

Render Props vs Higher-Order Components (HOC)

When to Use Render Props

Use Render Props when you need:

• To share logic between multiple components.
• To customize UI rendering while reusing the same functionality.
• For state management patterns like mouse tracking, form handling, or animations.