Render props have been a game-changer in the React world, offering a powerful way to share code between components. I remember when I first stumbled upon this pattern – it was like finding a secret passage in a video game. Suddenly, I could reuse logic across my app without the headache of complex inheritance hierarchies.
So, what exactly are render props? At its core, it’s a simple concept: a component receives a function as a prop, which it then uses to render part of its output. This function prop allows the parent component to control what gets rendered, while the child component manages the how.
Let’s dive into a quick example to illustrate this:
const MouseTracker = ({ render }) => {
const [position, setPosition] = useState({ x: 0, y: 0 });
const handleMouseMove = (event) => {
setPosition({ x: event.clientX, y: event.clientY });
};
return (
<div onMouseMove={handleMouseMove}>
{render(position)}
</div>
);
};
// Usage
<MouseTracker render={({ x, y }) => (
<p>The mouse position is ({x}, {y})</p>
)} />
In this example, the MouseTracker component handles the logic of tracking the mouse position, but it doesn’t decide how to display that information. Instead, it calls the render function prop, passing along the current position. This allows different parent components to use the mouse tracking logic in various ways.
One of the coolest things about render props is how flexible they are. You’re not limited to just rendering UI – you can use this pattern to share any kind of logic or behavior. Want to create a reusable data fetching component? Render props have got you covered.
const DataFetcher = ({ url, render }) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch(url)
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
});
}, [url]);
return render({ data, loading, error });
};
// Usage
<DataFetcher
url="https://api.example.com/data"
render={({ data, loading, error }) => {
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return <ul>{data.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
}}
/>
This pattern is incredibly powerful because it separates the concerns of data fetching and data presentation. The DataFetcher component handles all the nitty-gritty details of making an API request, while the parent component decides how to render the results.
Now, you might be thinking, “This looks a lot like higher-order components (HOCs).” And you’d be right! Render props and HOCs are both patterns for sharing code between components. In fact, you can usually implement the same functionality using either pattern.
So why choose render props over HOCs? For one, render props can be easier to understand and debug. With HOCs, it’s not always clear where props are coming from, especially when you start composing multiple HOCs. Render props, on the other hand, make the flow of data more explicit.
Another advantage of render props is that they work better with static type checking. If you’re using TypeScript or Flow, you’ll find that render props are much easier to type correctly than HOCs.
But render props aren’t without their downsides. One common criticism is that they can lead to “callback hell” if you’re not careful. Nesting multiple components that use render props can make your JSX look pretty gnarly:
<MouseTracker render={mouse => (
<WindowSize render={window => (
<ThemeContext.Consumer>
{theme => (
// Finally, your actual component
)}
</ThemeContext.Consumer>
)} />
)} />
Yikes! That’s a lot of nesting. Fortunately, there are ways to mitigate this. One approach is to use the component composition pattern to break things up into smaller, more manageable pieces.
Despite this potential drawback, render props have found their way into many popular React libraries. Perhaps the most famous example is React Router, which uses render props to give you fine-grained control over how your routes are rendered:
<Route path="/user/:id" render={({ match }) => (
<User id={match.params.id} />
)} />
Another great example is Formik, a popular form library for React. Formik uses render props to provide you with form state and helper methods:
<Formik
initialValues={{ email: '', password: '' }}
onSubmit={values => console.log(values)}
>
{({ values, handleChange, handleSubmit }) => (
<form onSubmit={handleSubmit}>
<input
type="email"
name="email"
onChange={handleChange}
value={values.email}
/>
<input
type="password"
name="password"
onChange={handleChange}
value={values.password}
/>
<button type="submit">Submit</button>
</form>
)}
</Formik>
One thing I love about render props is how they encourage you to think in terms of reusable behaviors rather than reusable UI. This can lead to more flexible, composable code. For instance, I once worked on a project where we needed to implement drag-and-drop functionality in several different components. Instead of copy-pasting the drag-and-drop logic everywhere, we created a Draggable component using render props:
const Draggable = ({ render }) => {
const [isDragging, setIsDragging] = useState(false);
const [position, setPosition] = useState({ x: 0, y: 0 });
const handleMouseDown = () => setIsDragging(true);
const handleMouseUp = () => setIsDragging(false);
const handleMouseMove = (e) => {
if (isDragging) {
setPosition({ x: e.clientX, y: e.clientY });
}
};
return (
<div
onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp}
onMouseMove={handleMouseMove}
>
{render({ isDragging, position })}
</div>
);
};
// Usage
<Draggable render={({ isDragging, position }) => (
<div style={{
position: 'absolute',
left: position.x,
top: position.y,
cursor: isDragging ? 'grabbing' : 'grab',
}}>
Drag me!
</div>
)} />
This approach allowed us to easily add drag-and-drop behavior to any component, regardless of its visual presentation.
It’s worth noting that with the introduction of hooks in React 16.8, some developers have moved away from render props in favor of custom hooks for code reuse. Hooks can often achieve the same goals as render props with less boilerplate. However, render props still have their place, especially when you need more control over the rendering process or when you’re working with class components.
In fact, render props and hooks can work together beautifully. You can use hooks to implement the shared logic, and then use render props to expose that logic to components:
const useMousePosition = () => {
const [position, setPosition] = useState({ x: 0, y: 0 });
useEffect(() => {
const handleMouseMove = (event) => {
setPosition({ x: event.clientX, y: event.clientY });
};
window.addEventListener('mousemove', handleMouseMove);
return () => {
window.removeEventListener('mousemove', handleMouseMove);
};
}, []);
return position;
};
const MouseTracker = ({ render }) => {
const position = useMousePosition();
return render(position);
};
// Usage remains the same
<MouseTracker render={({ x, y }) => (
<p>The mouse position is ({x}, {y})</p>
)} />
This approach combines the simplicity of hooks with the flexibility of render props.
As we wrap up, it’s important to remember that render props are just one tool in your React toolbox. They’re not always the best solution for every problem, but when used appropriately, they can lead to more flexible, reusable code.
In my own projects, I’ve found render props particularly useful for creating UI components that need to be highly customizable. For example, I once built a date picker component that used render props to allow different apps to completely customize the appearance of the calendar:
<DatePicker
render={({ date, setDate, monthData }) => (
<div>
<button onClick={() => setDate(prev => subMonths(prev, 1))}>Prev</button>
<button onClick={() => setDate(prev => addMonths(prev, 1))}>Next</button>
<div>
{monthData.map(week => (
<div key={week[0].toISOString()}>
{week.map(day => (
<button
key={day.toISOString()}
onClick={() => setDate(day)}
style={{
fontWeight: isSameDay(day, date) ? 'bold' : 'normal'
}}
>
{format(day, 'd')}
</button>
))}
</div>
))}
</div>
</div>
)}
/>
This level of customization would have been much harder to achieve with a more traditional component API.
In conclusion, render props are a powerful pattern that can help you write more reusable, flexible React code. They’re particularly useful when you need to share non-visual logic between components, or when you want to give parent components fine-grained control over rendering. While they’re not the right tool for every job, understanding render props will make you a more versatile React developer. So next time you find yourself copying and pasting the same logic across multiple components, consider whether a render prop might be the solution you’re looking for. Happy coding!