What is the Render Props Pattern in React?
Learn the React render props pattern: how a function prop shares stateful logic while the caller controls the UI, with code, comparisons and interview answers.
Expected Interview Answer
The render props pattern is a technique where a component takes a function as a prop and calls it to decide what to render, letting the component share stateful logic while the caller controls the resulting UI.
A render-props component owns some behavior — mouse position, data fetching, toggling — and instead of rendering fixed markup, it invokes a function prop (often literally named render, or passed as children) with its internal state. The caller supplies that function and returns whatever JSX it wants using the provided values. This inverts control: reusable logic lives in one place while presentation stays flexible. Modern React often achieves the same reuse with custom hooks, but render props remain useful for sharing logic while dictating structure around it.
- Shares stateful logic without duplicating it
- Keeps rendering fully under the caller's control
- Avoids the wrapper nesting of some HOC setups
- Composes well and is explicit about data flow
- Works for cross-cutting concerns like tracking or fetching
AI Mentor Explanation
A render-props component is like a pitch-report analyst who gathers the conditions — grass, humidity, cracks — then hands them to whichever commentator asked. The analyst supplies the raw readings; each commentator decides how to present them to their own audience.
Step-by-Step Explanation
Step 1
Build the logic component
Create a component that manages some state or behavior, such as tracking mouse position.
Step 2
Accept a function prop
Take a function as a prop, commonly named render or passed as children.
Step 3
Call the function with state
In the component's render, invoke that function and pass the internal state as arguments.
Step 4
Return its result
Render whatever JSX the function returns so the caller controls the output.
Step 5
Consume it
A parent supplies the function and uses the provided values to render its own UI.
What Interviewer Expects
- Defining render props as a function-prop sharing technique
- Explaining that logic is shared while UI stays with the caller
- Writing a small render-props component
- Comparing render props with HOCs and custom hooks
- Knowing when hooks are the simpler modern choice
Common Mistakes
- Confusing render props with children as static JSX
- Defining the render function inline causing needless re-renders where it matters
- Thinking render props and HOCs cannot be combined
- Believing hooks fully replace render props in every case
- Forgetting the function must return valid JSX
Best Answer (HR Friendly)
“The render props pattern is a way for one React component to do some shared work, like tracking data, and then let another part of the app decide how that data looks on screen. It passes a function in as a prop and calls it with the values, so the display stays flexible.”
Code Example
import { useState } from 'react'
function MouseTracker({ render }) {
const [pos, setPos] = useState({ x: 0, y: 0 })
return (
<div onMouseMove={(e) => setPos({ x: e.clientX, y: e.clientY })}>
{render(pos)}
</div>
)
}
function App() {
return (
<MouseTracker
render={({ x, y }) => (
<p>The cursor is at ({x}, {y})</p>
)}
/>
)
}Follow-up Questions
- How do render props differ from higher-order components?
- Can you achieve the same result with a custom hook?
- How do you pass a render prop through the children prop?
- What performance concern comes from inline render functions?
- Why did hooks reduce the need for render props?
MCQ Practice
1. What defines the render props pattern?
A render-props component receives a function prop and calls it with its state to let the caller decide the output.
2. What problem do render props primarily solve?
Render props let you reuse behavior and state logic while leaving the rendered UI up to the consumer.
3. What modern feature often replaces render props?
Custom hooks share stateful logic without the extra component nesting, so they often replace render props today.
Flash Cards
What is the render props pattern? — A component takes a function prop and calls it with its state to let the caller decide what to render.
What does render props share? — Stateful logic and behavior, while the rendered UI stays with the consumer.
What modern feature often replaces it? — Custom hooks, which share logic without extra component nesting.
How is a render prop often passed? — As a prop named render, or as the children prop when children is a function.