Advanced React Patterns with Hooks
If you’ve used react for any length of time you know how easy it is to get started creating components and interfaces for your personal projects. The issues start to arise however, when you start working in teams or creating components or APIs that other developers can use. Having a deeper understanding of React patterns will prevent a lot of rework for you and your team.
As we dig into these patterns you’ll see different reusable and maintainable ways to implement the same idea. You’ll also see patterns within these that you could take a use elsewhere.
Let’s dig into some advanced patterns.
Want to read this story later? Save it in Heyday.
Render Props
Render props are probably the easiest pattern to learn and it’s the most common especially before React hooks were widely used. The premise is to return the to end user props they can use however they like. This pattern was usually used in class components but, let’s create the render prop pattern with a functional component.
As you can see the render prop patter is pretty straight forward. All we are doing here is exposing the props that the user will use in their implementation. We create the props and then pass them to its children. This pattern allows us to give total control to the user.
Here we are able to create whatever implementation that we would like without having to be held to whatever the creator of the original component intended. This gives us maximum flexibility.
Prop Getters
The prop getter pattern is very similar to the render props with some slight differences. Instead of just passing all of your props at once, you are giving the user a function that returns an object of props. This allows the end-user to grab whatever props they may need. Creating a prop getter allows them to only get the props they need and disregard the props they don’t. Let’s see it in action.
As you can see this looks very similar to the render prop pattern. What we are doing here is creating a function that where we are taking in props. Then we are pulling out the props that we care about and passing on the rest to the user to do with as they please. Finally, we wrap it up in a neat function that returns an object and then we pass it to our children again. Let’s see how a user may use this.
You can see that this pattern is very flexible. You’re able to not only able to grab props, but you can also override the props to fit whatever you would like. You can see that we are creating another button and passing in another function that is being called.
Compound Components
Compound components are really cool and my favorite pattern. They are two or more components that work together and share internal state with each other. For example, think about the select html element. What would you always use it with? The option element right? That’s because those two elements are bounded together to accomplish a task. We can do the same thing in React. Let’s see…
Compound components can be created in a couple of different ways. However, here we are using the Context API. This helps us to avoid prop drilling and allows us to share state to only the components we choose. This makes it easy to share internal state the user doesn’t know about. Let’s take a look at this in action.
As we can see here the user can place our components anywhere they like in side our toggle and it will work exactly the same. This is because as long as it’s inside the provider, it will continue to be supplied with the needed state.
Compound components are used heavily in many of the component libraries you know and love. Think of the Navigation component in React Bootstrap or Material UI. You can pick and choose what you want from it and there is internal state that is managed across those components. Now you know how to build your own!
Conclusion
These are just some of the patterns in React that can be used to make your components super reusable. Why not take some time to implement some yourself and see how they work for you. I’m sure you’ll see the benefits in no time!
Enjoyed this post? Subscribe to the Machine Learnings newsletter for an easy understanding of AI advances shaping our world.
