A Guide to React Context
For a react developer, the context in react is quite a crucial tool to know of. React context is an easy way to provide any component with, irrespective of how deep, they are in the component tree. Hence, making it quite a necessary tool for a React developer or a wanna-be react developer.
In this article, we will discuss the context of React in complete detail, Getting to know what it is? how to use it? Where to use it and where not to react to context and much more. The article is created in such a manner that even if you have never used react context anywhere before, you still be able to understand each and everything in the article with the use of simple examples.
Enough with the chatter and let’s get started!
What is React Context?
Using React context is the easiest way to share and consume data in whatever component we want in the given react app, irrespective of how deep the component is in the component tree, Without needing to use any props.
When to Use the React Context?
The react context provides the user with an easy way to Pass on the data to any component in the application.
It is best used when you want all the components to access global data and want to change all of them easily when the global settings or data changes. A prominent example would be Theme data, changing between the light and dark mode becomes quite easy with React context.
Similarly, It can be used for Location-specific data like User language or the locale, or the User data, (data specific to currently authenticated users).
When not to Use the React Context?
There are quite a lot of benefits to using the context in react to create various react applications. But you should think carefully before deciding to use the react context for creating your application. As it does have some disadvantages also.
Make the Code more Difficult (Complexity) – Using react context in your application, will also increase the complexity of your application.
Make Testing more Difficult – Integrating react context will make the unit testing for each and every component. You will need to wrap the consumer components into a react context provider while doing the unit testing.
What Problem does Using the React Context Solve?
The most serious problem solved by using the react context is to avoid the problem of props drilling. Now you may ask what props drilling is? The term props drilling is used to describe when you have to props down data to a nested component through multiple parent components, who don’t even need that props.
How do you use React context?
React context has become a built-in API in the react programming language from the react version 16.
This simply means if you are using the react version 16 or plus, then you do not need to install any new API, and can create and use context directly in any react application, after importing the React.
You can use any of these two syntaxes to start using the react context
import React from ‘react’;
or
import { createContext } from ‘react’;
The process of applying to the context in react can be divided into 3 simple steps, which are as follows:
1 ) Create the context in react by using the createContext method.
2 ) Provide the context to different components by taking the created context and wrapping the context provider around your component tree. You can assign any value you like to the context provider around your component tree.
3 ) Start Consuming (using) the context by using the context consumer to read the value of value within any component.
Let’s understand all of these above points by looking at a simple example, given below as an example –
import React from ‘react’;
export const ExContext = React.createContext();
export default function App() {
return (
<ExContext.Provider value=”Reed”>
<Example />
</ExContext.Provider>
)
}
function Example() {
return (
<ExContext.Consumer>
{value => <h1>{value}</h1>}
{/* prints: Reed */}
</ExContext.Consumer>
)
}
Here in the code written above, you can see the use of the react context. Let’s break down the code above, and see how it follows the steps discussed earlier.
1 ) Creating Context –
import React from ‘react’;
export const ExContext = React.createContext();
Above all the app components, we first imported React and then created the react context using its in-built function createContext(); and putting the result in a variable ExContext. In most cases, your component will be in another file, you will need to export it first.
2 ) Providing the Context to the Component –
export default function App()
{
return (
<ExContext.Provider value=”ExampleValue”>
<Example />
</ExContext.Provider>
)
}
Context provider component can be used to its child component, to pass the value down to every component in your react application, you need to wrap our provider component around it. In the code above, it is done to the “Example” component.
And to put the desired value to the entire component tree, we can use the “value” prop to do so. In the code above, it is set as “ExampleValue”. You can simply change the value of context by adjusting the Value prop.
3 ) Consuming or Using the Context Data
function Example() {
return (
<ExContext.Consumer>
{value => <h1>{value}</h1>}
{/* prints: ExampleValue*/}
</ExContext.Consumer>
)
Consuming react content can be done by using the special component .consumer, which is available on the context instance.
In the case of any change in the value of context, the consumer component will also re-render itself in order to address the new changes. In every context, You can have as many consumers as you may want, and the value change in context will change all the consumers immediately.
Conclusion
I hope this article would have helped you in getting a better understanding of how to use react context in your react application. Good luck on your react project, Happy Coding!!!
