React Context Hook

Mar 18th, 2022 - written by Kimserey with .

Context hook in React can be used to manage global state. In today’s post we will see how we can use useContext hook and how we can pair it with useState to provide a global state to all children components.

• useContext Hook
• Use with useState

useContext Hook

useContext is used together with createContext. We start first by creating a context with createContext:

1
const UserContext = createContext<{ username?: string }>({});

The Context then can instantiate a Provider component to provide a value within our template:

1
2
3
4
5
6
7
8
9
const App: React.FC = () => {
  return (
    <UserContext.Provider value=>
      <div>
        <MyComponent></MyComponent>
      </div>
    </UserContext.Provider>
  );
};

We can see how we create an instance of the provider with UserContext.Provider with a value.

Then from any child component, we will then be able to resolve the context using useContext hook providing the context as an argument:

1
const { username } = useContext(UserContext);

Putting it all together, we have:

1. a context UserContext created with createContext accessible across all components,
2. a provider created with UserContext.Provider in the template at the root,
3. useContext hook used in any child component where we want to access the context value.

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
33
34
35
import React, { createContext, useContext } from "react";
import "./App.css";

const UserContext = createContext<{ username?: string }>({});

const MyInnerComponent: React.FC = () => {
  const { username } = useContext(UserContext);

  return <p>Hello {username}</p>;
};

const MyComponent: React.FC = () => {
  const { username } = useContext(UserContext);

  return (
    <div>
      Hello {username}
      <p>
        <MyInnerComponent></MyInnerComponent>
      </p>
    </div>
  );
};

const App: React.FC = () => {
  return (
    <UserContext.Provider value=>
      <div>
        <MyComponent></MyComponent>
      </div>
    </UserContext.Provider>
  );
};

export default App;

We can see that from MyComponent we can access the context, and from MyInnerComponent, a child of MyComponent, we are also able to resolve the context. This removes the necessity of passing the username as a props on all components.

Use with useState

So far we’ve created a static context which was defined at the beginning. But we can also pair it with useState and set the value as a state value:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const App: React.FC = () => {
  const [username, setUsername] = useState("tom");

  return (
    <>
      <UserContext.Provider value=>
        <div>
          <button onClick={() => setUsername("sam")}>Set to Sam</button>
          <MyComponent></MyComponent>
        </div>
      </UserContext.Provider>
    </>
  );
};

In that way, we are able to update the context and have all children components also have their context value updated. And that concludes today’s post on the context hook!

Conclusion

Today we looked at the context hook in React. We started by looking at how we could use it and moved on to how we could pair it with the state hook to update the context on all components if the value was to change. I hope you liked this post and I’ll see you on the next one!