Please refer the git repo which contains the code of the above demo.

Important note before you use React Context API

One of the most important things about React is that the data flows in only one direction, which enables the developers to predict, easy debugging and write code which does not do any magic.

The one-way data flow happens via props , hence the props play a vital role. The props also act as the documentation for the components and make it reusable within the app and even outside the app.

If we heavily use Context just to avoid prop drilling then we are not going in the right direction. We are making it tightly coupled and the reusability of components would be compromised.

In software development, more quality time spent in designing saves many upcoming weeks of effort.

We should not heavily use Context for everything. Take time, think and design properly and if you see a few sets of data have been passed to many levels down the tree and it is going to be very hard to manage, then take a call and use Context.

Context should be used only for the data, which will be used at various levels in the React component tree.

How to implement Context in React v16.3+?

React team has done a great job by keeping Context API very simple to implement. The are two main actors, the Provider provides the object in context and the Consumer consumes these data from the context in sub-tree.

Let’s implement the themes so that we know in detail.

Create a context

The first step is to create a context using the create method. The components at the different level will use the same context to get the data.

The example of creation of react context

createContext returns a pair of Provider and Consumer components and takes on defaultValue of the current context. Refer line 18 in above gist.

React allows us to create multiple contexts in one app. For better maintainability and separation of concern, we should create a separate context which would serve only that purpose. For example, we can have different contexts like ThemeContext , LanguageContext , and UserContext . These separate files for context increase the maintainability and glorify the separation of concerns.

2. Provider

The provider is a component which enables the Consumers to subscribe to the context changes. The provider accepts a value prop and the data in this prop is available to all the child consumers.

In many scenarios, this value needs to be dynamic and changes in runtime e.g theme selection changed by the user from UI, then we can store it and pick from the component state.

The method toggleTheme , refer to the line number 17 in below gist, changes the value in state and the child consumers get the new value.

Below is the example component which Provides the context to Header and Body component.

The example of Provider component from react context

3. Consumer

The consumer is a getter of context. The components can subscribe to context values by wrapping the Consumer around it. Consumer needs a method with a parameter which returns a react node and composes with the app.

The value prop passed from Provider of the current context above in the tree and is captured in the theme variable by the consumer. Refer line 9 in below git gist.

The example of Consumer from react context

Don’t you think the brand new Context API is just amazing? Implementing themes and multiple languages were never so easy.

I hope this post was helpful to you.

Please feel free to comment below with any questions or suggestions and consider applauding 👏 if you liked this post and most importantly: Keep Reacting and keep learning 😊 Please feel free to comment below and ask me anything!

Keep learning and sharing 😊

If this article helped you, then you can buy me a coffee 😊