Using Context in React in the simplest way
Have you ever come across a situation where a Prop is requested by a component everywhere in a hierarchy tree?
Have you ever been frustrated by having to pass a prop down to a component in React just to push it down on your own component?
To overcome the above problems, you might consider using the Context API in React.
Question
Before embarking on learning React Context, I set out the problem that you encounter as follows:
- You have a data of 1 number with the value of the message “You won 100 million”
- You need this data in 2 components: Red and Green.
- Green component is a child of Blue component and Blue is a child of Red component. According to “genealogy”, Green is the nephew of Red component.
So how to send data from Red to Green? Normally, you will have to send data to Blue first, then from Blue to Green.
With the above problem, you will have the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | const Green = (props) => ( <div className="green">{props. message}</div> ) const Blue = (props) => ( <div className="blue"> <Green message={props. message} /> </div> ) class Red extends Component { state = { message : 'Ông trúng số 100 triệu rồi' } render() { return <div className="red"> {this.state. message} <Blue message={this.state. message} /> </div> } |
If the project is realistic, you have more than 3 floors as above, how complicated and inhibiting is it?
If before, you can use Redux or Mobx to handle this problem. Since React 16.3, you have a solution right in React. That’s the React Context.
What is the React Context API?
According to the original React documentation it describes:
A context is designed to share data that can be considered “global” for a tree of React components
Simply put, the React Context API is a way to create global variables that can be used throughout the application. As in the application, the values in the theme, user or current locale … will be used anywhere.
We have a look at the comparison below:
In the next part, I will show you how to use Context in React. But for you to be receptive to this section, I recommend you to have the following basic knowledge:
- Know and distinguish how to write components according to functional or class
- Already know how to use React Hook.
If you do not know both above knowledge, please review here Link
Use React Context
The example problem is that we need to manage users in the application.
First, I create a context named: UserContext.js. Next, I create a provider (which is a component providing values) and a consumer (a component that uses values).
Create Context
First, the content of UserContext.js
1 2 3 4 5 6 7 | import React from 'react'; // here we can initialise with any value we want. const UserContext = React.createContext({}); export const UserProvider = UserContext.Provider; export const UserConsumer = UserContext.Consumer; export default UserContext; |
Providing Context
The provider needs to wrap the parent element. Therefore, we will wrap the App component in the provider.
1 2 3 4 5 6 7 8 9 10 11 12 13 | import React from 'react'; import { UserProvider } from './UserContext' const App = props => { const user = { name: 'Ustat', age: 24 }; return ( <UserProvider value={user}> <div> This is App Component </div> </UserProvider> ) } export default App; |
Below we will find a way to get values from Context.
Consuming Context
Providing value to a provider does the same thing when writing a component in a class or function style. However, with taking value, the writing style will differ slightly between the two schools.
Write consumer components according to class:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | import React from 'react'; import { UserConsumer } from './UserContext'; class OrderInfo extends React.Component { static contextType = UserContext; componentDidMount() { let user = this.context; console.log(user); // { name: 'Ustat', age: 24 } } render() { // use this if you are retrieving value using contextType. let user = this.context; return ( <div>{user.name}</div> ) OR // use this if you wish to use UserConsumer return ( <UserConsumer> {context => { return <div>{context.name}</div> }} </UserConsumer> ) } } |
Write consumer components in function style
1 2 3 4 5 6 7 8 | import React, { useContext } from 'react'; import UserContext from './UserContext'; const HomePage = () => { const user = useContext(UserContext); console.log(user); // { name: 'Ustat', age: 24 } return null; } |
It is done.
Hopefully through this article, you have one more solution to write React code to be cleaner and tidy.
How are you enjoying this React Context? Leave a comment below for me and everyone knows.