React patterns you should know
And what the near future holds
Throughout your React carreer you will find yourself wondering, several times, how can I achieve what I want in a simple and effective way?!
Gladly, applying some useful patterns, you can rid yourself of messy and over-complicated code.
Many times I see developers asking questions of “How to do X in React”. Some times it is adequate to ask this question, however, if you just think about it, in other cases you can just look at it as a Javascript problem and not a React one. Many interesting solutions and patterns are born from this thinking.
React is just javascript!
Let’s go through some common hickups and how you can apply some patterns to solve them.
Global app data and cross-cutting concerns
Every modern web application probably has some kind of variable(s) or object(s) that need to be used somewhere inside the application at one given point in time. It can be something like a localization helper (I18n) like polyglot or maybe even the permissions that the current logged user has for the app. These particular things won’t change often (depending on the requirements) and for that reason, there is not much sense in storing them in state.
In the initialization process of our application we define our locale strings / user permissions and we’re ready to use them…… but how?
Wait…. do you mean we have to pass it down as props and pass them down forever and ever until there are no more components, just so we can access them deep down into the app?
No, chill! If you try and think of a similar behaviour it is easy to find something that already has an identic requirement. Right?!
- react-redux
We define our state in the store and then, whenever we need it, we connect our component to the store and voilá! we have access to the store state. What react-redux uses is something called a Provider and a connect HOC (Higher Order Component)
- react-router
In react-router Router works as the Provider and withRouter is the HOC that let’s you access the router props.
Provider
The Provider uses React’s Context API to pass props through the component tree without having to pass the props down manually at every level. We can easily “setup” our stuff and pass down whatever we want “down” into the rest of the components.
Let’s pick up the localization helper example I have and build a Provider that receives the current locale, initializes polyglot for said locale and then passes the translate function and the locale down the component tree.
Done! Now anywhere in our application we can access the t function and the locale that is defined for the application, as long as we get it from context.
But if we access it many, many times we would repeat a lot of code. To deal with this we can use an HOC.
Higher Order Components (HOCs)
A Higher Order Component is, basically, a function that receives one Component and returns another one. You can immediately understand how we are going to pair this with our Provider. It provided the stuff and now we must get the stuff. It is dead simple:
As you can see, withI18n, gets a Component (ComponentToWrap) as a parameter, accesses the provided props from context and returns a brand new Component with those props passed down to it.
So now, whenever we want to access the t function or the app’s locale we can just:
This stuff is amazing and is something that every React developer should have on his or her’s toolset.
But we don’t always need Providers and HOCs for cross-cutting concerns. Sometimes it is just too much and the amount of code is just not needed. For these situations we can use one of my favorites.
Render props
The term “render prop” refers to a simple technique for sharing code between React components using a prop whose value is a function.
I’ve written about these bad boys before so, if you want to check it out, it’s in the link above.
Used by folks like Formik, react-router and react-motion this pattern is one of my favorites. Spot your points of code repetition in your code and refactor away.
Like I explain in my post you can use the render props pattern simplify many “day to day” coding problems like list fetching and form submissions.
The future ✨
As I’m writing this piece, the release of a new React version is nearing. v16.3.0! And it introduces some new yummy news for the Context API.
Please take a a look a this great post to see what is up in React land!
If you want to stay updated on everything I write please feel free to Follow me!
And if you want to see more stuff from me I can recommend these posts:
See you around 😄