I’ve recently stumbled upon a very interesting rendering pattern in React that I don’t see very often in the wild. I believe it’s known as render callback pattern and it’s a useful pattern when you don’t want to overcomplicate children receiving properties using
React.cloneElement or any of that fancy (though useful) magic.
Here’s how we would like to use it:
FieldItem will render either the
Loading or the
Profile component, depending on the existence of a
user property. It also passes down a prop of its own,
username, that one of these components can consume to make a call, for example.
What is interesting here is that
<FieldItem/> uses a function as a child. Any child component inside it is now free to consume this
prop however it needs to, totally decoupled from the parent. How cool is that?
How to make this work
To make the above work, the key is to treat
this.props.children as a function. So in order for the
Profile component to render whatever it needs to render, it needs to run the callback on the
children function, passing it the
user argument it expects. Here’s an example implementation of
Breaking this down
The key there is the child component rendering
return this.props.children(this.state.user) with its own state. This means its up to the component to decide how to use the arguments it receives, and the parent component
FieldItem doesn’t care: it only manages which component to render, in this case.
null for 1500ms, the callback receives
null as a value for
user, thus rendering
<Loading /> first. Once we have a
user, the Profile component will then render. I really enjoy the simplicity and the cleanliness of this approach managing components.
A working example:
Anything I might have overlooked or gotten wrong? Don’t be afraid to ping me on Twitter.