Phase 4 of my time at Flatiron School is coming to a close. I wrapped up my phase 4 final project, which was the biggest challenge I’ve faced as a new programmer to date. One of the requirements was the inclusion of the React hook, useContext. I’d never used this hook before, so it was an interesting challenge to learn how it works and to implement it into my project.
What I found was that the useContext hook is a powerful tool in React that can simplify state management and make your code more organized and reusable. Together we'll explore what the useContext hook is, how it works, and how you can use it in your own React applications.
What is the useContext hook?
The useContext hook is a built-in React hook that allows you to access state and methods from a parent component in any child component without having to pass props down through each level of the component tree.
When using the useContext hook, you create a context object that contains the shared state and methods you want to use across multiple components. Then, you can use the useContext hook to access that context object in any child component and use its state and methods.
Here’s an example to show how the useContext hook works.
Suppose you have a parent component called App that has a state variable called count and a method called incrementCount:
import React, { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
const incrementCount() {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={incrementCount}>Increment</button>
<ChildComponent />
</div>
);
};
export default App;
Here we're using the useState hook to create a state variable called count and a method called setCount to update the count. We're also rendering a button that calls the incrementCount method when clicked.
Now, suppose we have a child component called ChildComponent that needs access to the count and incrementCount variables. We could pass these variables down as props, but that would require us to pass them through every level of the component tree, which, I discovered, opens up your code to all kinds of headache inducing troubleshooting if you miss a step. Instead, we can use the useContext hook to access these variables directly.
To use the useContext hook, we first need to create a context object in the parent component. We can do this using the createContext method:
import React, { useState, createContext } from 'react';
const CountContext = React.createContext()
export const CountContext = createContext();
In this example, we're creating a context object called CountContext using the createContext method. We're exporting this object so that we can use it in other components.
Next, we need to wrap our parent component with the CountContext.Provider component and pass it the count and incrementCount variables:
import React, { useState, createContext } from 'react';
import ChildComponent from './ChildComponent';
export const CountContext = createContext();
function App() {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<CountContext.Provider value={{ count, incrementCount }}>
<div>
<p>Count: {count}</p>
<button onClick={incrementCount}>Increment</button>
<ChildComponent />
</div>
</CountContext.Provider>
);
};
export default App;
In this example, we're wrapping the App component with the CountContext.Provider component and passing it an object with the count and incrementCount variables as values.
Finally, in the ChildComponent, we can use the useContext hook to access the count and incrementCount variables:
import React, { useContext } from 'react';
import { CountContext } from './App';
function ChildComponent() {
const { count, incrementCount } = useContext(CountContext);
return (
<div>
<p>Count: {count}</p>
<button onClick={incrementCount}>Increment</button>
</div>
);
};
export default ChildComponent;
In this example, we're importing the CountContext object from the App component and using the useContext hook to access the count and incrementCount variables. We can then render these variables in the ChildComponent JSX and use the incrementCount method to update the count.
By using the useContext hook, we're able to access shared state and methods without having to pass props down through every level of the component tree.
One can also set state or even define the provider in the context file, as I did with my own project, to pass down user information:
import React, { useState } from "react";
const UserContext = React.createContext();
function UserProvider({ children }) {
const [user, setUser] = useState(null);
return (
<UserContext.Provider value={{ user, setUser }}>
{children}
</UserContext.Provider>
);
}
export { UserContext, UserProvider };
This way, I just needed to import UserContext and if I wanted, say, just the user variable, in any component I would declare:
const { user } = useContext(UserContext)
And in the same way have access to the user variable.
My instructor, when speaking to him, mentioned useContext was becoming quite popular and I now understand why. useContext is a powerful tool that requires minimal setup and makes your code more simple, and easier to understand and develop.
Top comments (0)