Render Props Pattern in Modern React0%
Higher-Order Components vs Modern Hooks

Render Props Pattern in Modern React

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Render Props Pattern in Modern React

1. What is the Render Props Pattern?

Prior to the introduction of React Hooks in 16.8, sharing stateful logic between components was challenging. The two primary techniques were Higher-Order Components (HOCs) and the Render Props Pattern.

The term "render prop" refers to a technique for sharing code between React components using a prop whose value is a function that returns a React element.

Instead of a component rendering a hardcoded piece of UI, it delegates rendering to the consumer by calling the function and passing its internal state as arguments:

Output
[Parent Provider Component]
├─ Computes internal state (e.g. mouse coordinates, scroll, fetch status)
└─ Calls: props.render(internalState) ──> Consumer decides what to render!

2. Classic Example: Mouse Position Tracker

Consider a component that tracks cursor coordinates:

JSX
import React, { useState } from 'react';
 
// Provider Component encapsulating stateful tracking logic
export function MouseTracker({ render }) {
const [coords, setCoords] = useState({ x: 0, y: 0 });
 
const handleMouseMove = (event) => {
setCoords({
x: event.clientX,
y: event.clientY
});
};
 
return (
<div
style={{ height: '300px', border: '2px dashed #94a3b8', position: 'relative' }}
onMouseMove={handleMouseMove}
>
{/* Delegate rendering to consumer by passing coords object */}
{render(coords)}
</div>
);
}

Consuming the Render Prop:

JSX
export default function App() {
return (
<div>
<h2>Render Props Mouse Coordinate Explorer</h2>
{/* Consumer 1: Renders coordinates as text */}
<MouseTracker
render={({ x, y }) => (
<p className="coord-text">Cursor is at: X={x}, Y={y}</p>
)}
/>
 
{/* Consumer 2: Renders a circle following the cursor */}
<MouseTracker
render={({ x, y }) => (
<div
style={{
position: 'absolute',
left: x - 10,
top: y - 10,
width: 20,
height: 20,
borderRadius: '50%',
backgroundColor: '#3b82f6',
pointerEvents: 'none'
}}
/>
)}
/>
</div>
);
}

3. Using children as a Render Prop Function

While the prop is often called render, it is equally common and idiomatic to use children as a function:

JSX
export function Toggle({ children }) {
const [on, setOn] = useState(false);
const toggle = () => setOn(prev => !prev);
 
// Invoke children as a function
return children({ on, toggle });
}
 
// Consuming children as a function:
<Toggle>
{({ on, toggle }) => (
<div>
<button onClick={toggle}>{on ? 'Collapse' : 'Expand'}</button>
{on && <div className="panel">Secret Admin Content</div>}
</div>
)}
</Toggle>

4. Render Props in the Age of Custom Hooks

Today, Custom Hooks (like useMousePosition() or useToggle()) have superseded render props for general logic sharing because hooks avoid "wrapper hell" and deep JSX nesting.

However, render props remain essential in modern React for:

  • Headless UI Libraries: (e.g. Downshift, React Virtualized, TanStack Table) where a component controls keyboard navigation and virtualization but leaves markup rendering entirely to the user.
  • Dynamic Slot Injection: Passing rendering callbacks for items inside complex virtualized lists or table cells.
Interactive Quiz

Practice Quiz

Question 1
What defines the "render props" pattern in React?
Question 2
What major architectural advantage did render props provide before the introduction of React Hooks?
Question 3
How can props.children be used in a render prop pattern?
Question 4
Why have Custom Hooks largely replaced render props for general state sharing?
Question 5
In which modern libraries is the render prop pattern still heavily utilized?
Next Lesson

Higher-Order Components vs Modern Hooks

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Component Reusability and Polymorphic ComponentsHigher-Order Components vs Modern Hooks

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext