Santa React patterns giveaway
It’s that time of the year when everyone is sharing love and gif(t)s with their closest ones. Such a pitty that I can only send you a browser cookie and not a real one; instead, I will share four React patterns that I would like you to take home and start using at the beginning of the next year.
New year, new pledges and new React patterns; every week until New Year’s Eve, I will reveal one React pattern that every React developer should know.
If you came across a problem (read challenge) while writing React components and if I faced the same problem as you, then it’s very likely that we’ve solved it in a similar way. Thus, we have a common software problem that we can solve using the same pattern. We can give it a name, describe it and share with other developers so that they can speed up their development process by using an already proven pattern; and this is what we call design patterns.
This week we’ll start off with a pattern called Render props!
Render props
As we already know, we can pass different props to a component; for example, we can pass a function that a component can call afterwards with some parameters. If we pass a function that returns a React element to some component and that component uses it for rendering, then we’re talking about a Render props pattern. No voodoo magic, just good ol’ plain function.
<GiftBox render={({cookie, chocolate}) => (
<ul>
<li>{cookie.name}</li>
<li>{chocolate.name}</li>
</ul>
)}/>The GiftBox component doesn’t have its own implementation of the render logic but it uses the render function from props for rendering purposes.
class GiftBox extends Component {
render() {
return (
this.props.render({
cookie: {
name: 'Oreo'
},
chocolate: {
name: 'Milka'
}
})
);
}
}Note: The function that you’re passing to a component doesn’t have to be named “render” — you can call it however you like. Heck, it doesn’t have to be named at all, you can pass an anonymous function as a children prop to a component and it would still be a Render props pattern.
<GiftBox>
{({cookie, chocolate}) => (
<p>do whatever you want with cookie and chocolate</p>
)}
</GiftBox>What makes this pattern so flexible is that you can pass the internal state and expose methods of the component to the render prop function. This way we can easily reuse the same behaviour on any other component without duplicating the same logic. To show how it works let’s extend our GiftBox component.
class GiftBox extends Component {
state = {
unwrapped: false
}
unwrap = () => {
this.setState({unwrapped: true})
}
takeGift = () => {
return this.state.unwrapped ? 'Chocolate' : 'Unwrap first'
}
render() {
return (
this.props.children({
unwrap: this.unwrap,
gift: this.takeGift()
})
);
}
}And the way we should use this GiftBox component:
<GiftBox>
{({unwrap, gift}) => (
<React.Fragment>
<p>{gift}</p>
<button onClick={unwrap}>Unwrap</button>
</React.Fragment>
)}
</GiftBox>Note: React.Fragment in the example above is used to avoid extra nodes in the DOM; it’s also one of the common patterns in React.
Now that you know how to use Render props pattern, it’s time to try it on your own. Your developer colleagues will be grateful because you know how to create flexible and reusable components for them to use. Some of the awesome libs that are using Render props pattern are Formik, React-Router and React-motion.
Meanwhile, try to guess what could be the next React pattern and write it down in a comment. Until next week and a new pattern reveal!
Danijel is a web developer at COBE. In his spare time, like every other geeky kid, he likes to create pens on Codepen and develop tiny Node apps while listening to RHCP in the background thread. Apart from his JavaScript warrior dreams, he likes to lift weights, eat a lot of chicken and watch crime/thriller movies till the late hours.
Like what you see? Be sure to hit a like and recommend us! And if you want to continue learning, check some other articles from our team:
