What is Render Props in React?

In React, sharing stateful logic between components is a fundamental challenge. One of the most powerful design patterns to solve this is the “Render Props” pattern. This article provides a clear overview of what render props are, demonstrates how they work with a practical code example, explains their main benefits, and discusses how they fit into the modern React ecosystem alongside Hooks.

Understanding Render Props

The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function. A component with a render prop takes that function, which returns a React element, and calls it instead of implementing its own render logic.

Essentially, instead of hardcoding what a component renders, you delegate the rendering control to the consumer of the component.

How Render Props Work

To understand this pattern, consider a scenario where you want to track the mouse position on a screen. Instead of writing the tracking logic in every component that needs it, you can create a reusable Mouse component.

Here is how you implement and use a render prop:

import React, { useState } from 'react';

// The reusable component that handles the state and logic
const Mouse = ({ render }) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({
      x: event.clientX,
      y: event.clientY,
    });
  };

  return (
    <div style={{ height: '100vh' }} onMouseMove={handleMouseMove}>
      {/* Call the render prop function and pass the state */}
      {render(position)}
    </div>
  );
};

// How you consume the reusable component
const App = () => {
  return (
    <div>
      <h1>Move the mouse around!</h1>
      <Mouse 
        render={(coords) => (
          <p>The mouse position is {coords.x}, {coords.y}</p>
        )} 
      />
    </div>
  );
};

export default App;

In this example, the Mouse component is responsible for listening to mouse movements and maintaining the state. It does not know or care how the coordinates are displayed. The parent component (App) defines how to render those coordinates by passing a function through the render prop.

Key Benefits of Render Props

• Code Reusability: You can package complex stateful behavior into a single component and reuse it across different UI representations.
• Separation of Concerns: The logic component only handles the state and behavior, while the consuming component only handles the user interface and presentation.
• Dynamism: Since the prop is a standard JavaScript function, you can pass arguments to it dynamically at runtime, making it highly flexible.

Render Props vs. React Hooks

With the introduction of React Hooks in version 16.8, sharing stateful logic became much simpler. Custom Hooks (like useMousePosition) can often replace the render props pattern, resulting in flatter component trees and cleaner code.

However, render props are still highly valuable in modern React development. While Hooks are ideal for sharing stateful logic, render props remain the preferred pattern when a component needs to delegate rendering authority to its consumer. Popular libraries like React Router and Formik still utilize render props to give developers precise control over UI rendering.