useContext
React Context
React Context allows you to handle state globally.
It works better with the useState Hook to transfer state amongst deeply nested components than useState alone.
The Problem
State should be held by the highest parent component in the stack that needs access to it.
To show, we have numerous nested components. The components at the top and bottom of the stack require access to the state.
To achieve this without Context, we must transmit the state as “props” via each nested component. This is known as “prop drilling”.
Example:
Passing “props” across stacked components:
import { useState } from "react";
import ReactDOM from "react-dom/client";
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</>
);
}
function Component2({ user }) {
return (
<>
<h1>Component 2</h1>
<Component3 user={user} />
</>
);
}
function Component3({ user }) {
return (
<>
<h1>Component 3</h1>
<Component4 user={user} />
</>
);
}
function Component4({ user }) {
return (
<>
<h1>Component 4</h1>
<Component5 user={user} />
</>
);
}
function Component5({ user }) {
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);
Even though components 2-4 did not require the state, they had to send it on so that it could reach component 5.
The Solution
The solution is to establish context.
Create Context
To construct context, you need to import createContext and initialize it:
import { useState, createContext } from "react";
import ReactDOM from "react-dom/client";
const UserContext = createContext()
Next, we’ll utilize the Context Provider to wrap the tree of components that require the state context.
Context Provider
Wrap child components in the Context Provider and set their state value.
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}
At this point, the user Context will be accessible to every component in this tree.
Make use of the useContext Hook
We must utilize the useContext Hook to obtain the Context before we can use it in a child component.
First, make sure the import statement contains the useContext:
import { useState, createContext, useContext } from "react";
Subsequently, the user Context is accessible across all components:
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
Full Example
Example:
Here’s the whole example with React Context:
import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";
const UserContext = createContext();
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 />
</UserContext.Provider>
);
}
function Component2() {
return (
<>
<h1>Component 2</h1>
<Component3 />
</>
);
}
function Component3() {
return (
<>
<h1>Component 3</h1>
<Component4 />
</>
);
}
function Component4() {
return (
<>
<h1>Component 4</h1>
<Component5 />
</>
);
}
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);
