Understanding and Using React's Context API
You might not need a state management library
State Management In Modern SPA
In this article I am going to be discussing about Managing States in a react application using the Context API which was introduced in React16.3.
If you are a front-end developer you might have heard of Redux a very common library, that is used as a predictable state container for modern Javascript applications, Redux does some magic in managing the state of an Application and it does it so well in a good and organised way, there are other state management libraries in the Javascript world, Redux is the unarguably the most popular.
State in an application can be different ways depending on the application and its usage.
For the rest of the article I will be referring to state as in React States, I will focus on how to manage states in a react application.
Let's talk about React Components
React allows us to declare our components mainly in two ways, there are other types of components like High Order Components and Render Props but they can all fall under either of the components below. Remember the whole purpose of having Components is to reuse them through out the application or share them with our folks.
Functional Components
A React Component can be a pure function that just returns some information to the user, without having to carry any heavy states or doing any heavy client side logic in your components, Functional Components are great to use because they are small and easy to understand
Class Components
When you use class components you have access to this.props, and you can make use of states directly in that component, class component have also the advantages of giving you access to lifecycle methods which give you more control over your components(we won't focus on them in this article).
Because our apps have a lot of state to pass around and many components to use those states we are often tempted to share one component's state with another component, if you are just using react with no other external libraries the state of a component will only be available in the same component.
There is a couple of ways that are recommended by the react team on dealing with states and passing data around, I will mention a few you can go ahead and comment on other ways you know and use.
Many people rush for other third-party libraries to manage states and to avoid props-drilling(Having to pass data through many components in between that didn't have to access to that data).
Context API
The Context API is one of the best feature that react has recently introduced, it solves most problems that many of us have had, we no longer have to do prop-drilling to get our data where it wants to be, we don't have to use connect HOC on every component, and we can share one component's state with another and as you know that state change triggers the component to update, we will have smooth updates without triggering that by ourselves React will take of it for us.
Use Cases
There are a lot of use cases that I can easily share with if you haven't used it, you can go ahead and start by these
- Adding Localization to your apps(Different Language Support to your users)
- Implementing Night Mode in your apps
- Sharing common data between components
- Etc …
So How Do we use the Context API
We can easily create a context like this, You can import it directly from React or use it a submodule of React.
const UserContext = React.createContext();
The createContext() produces a provider and a consumer,
so we could rewrite our UserContext like below
const { Provider, Consumer} = React.createContext();
or we can access Provider and Consumer from the UserContext we had created, so we would have <UserContext.Provider> and <UserContext.Consumer> and we would use them the same way as we would with the Provider and Consumer above.
You can also provide a default value to the Context
Let's go through our Context API Demo
We have 3 main components:
- Button (Triggers the change of the color)
- Index (holds our context Provider)
- TextSection (Where we are applying the color)
We start by creating the context for our theme as indicated above.
Let's talk about the App.js
We imported the ThemeContext we had created and since the app.js is our entry component we wrap in with the provider and the value of the provider, the value we are giving to the Provider is the state of our app, so we access provider from the themeContext as we explained that the whenever you create a context in react, you have access to the Provider and Consumer.
Provider supplies our state to other components that will subscribe to the Provider by using the Consumer.
We also have changeColor that chooses a random color from our current state and updates it the state, this is not the best of doing it but we can change the colors in many other ways. feel free to suggest in the comment.
The TextSection Component receives the background color though props, that means we don't have to use ThemeContext.Consumer in every component, If you properly structure your components very well it helps access props from one component to another.
For our button we are accessing the changeColor function which we passed to our context when we were creating it, the good thing about the Context API is that in this Button Component we have access to all states that are passed to the Context Provider's value. ThemeContext.Consumer uses renderProps another advanced way of sharing component's logic much like HOC(Higher Order Component).
a render prop is a function prop that a component uses to know what to render. React Docs
Conclusion
The Context API if best used gives you a very neat way of sharing your app states without changing the structure of your project or adding any third party library. The example I shew above can still work without using the Context API if you properly structure your components in a way that you don't have to mess up with props drilling, always remember to remove things that don't belong in states and also consider lifting the state up whenever possible.
Happy Coding !!!!
