Putting Context into useContext
I’m a big fan of React and with React Hooks.
Before you roll your eyes and go, “Not another React Hooks blog”, hear me out.
It’s no surprise that the industry standard has moved away from class-based components and lifecycles. I won’t be discussing function-based vs. class-based components in this post — you can read the tens of blogs about this topic on Dev and Medium.
I did, however, want to shed light on one particularly useful Hook I came to learn, which is useContext.
What is useContext?
useContext is a React Hook that allows us to have and use global state management without the need for class-based components.
As a refresher, components, the virtual DOM, props, and state are the key features of what makes React so unique and popular. State is how we keep track of how elements and components have been rendered and interacted with on the Frontend.
For example, let’s say you are filling out a survey. When you click on a checkbox, there could be a variable that keeps track of whether or not you clicked the box. In the event you or another user did click, the state of the component — in this case, the checkbox — would be set to the opposite of what it previously was, so from false (it was not clicked) to true (it currently is). When you unclick the box, state should now be set to the opposite value of what clicked was — now, false.
import {useState} from "react"export default function Survey(){
const [clicked, setClicked] = useState(false) const clickHandler = () => {
setClicked(!clicked)
} return (
<> <label>Do you want to take our customer survey for a chance to win $10,000?</label>
<input type="checkbox" onClick={clickHandler}></input> </>
)
useContext allows us to store some data in a global state, and have access to it through a variable. This hook eliminates the need for us to use and pass down props — in some instances. If your app needs access to data at most of its components, then useContext would be an efficient way of keeping your code DRY.
Overall, state management is useful but can get extremely complex in React. State is updated asynchronously in JavaScript, meaning your code may be running, but state isn’t updating and being resolved as the rest of the code. That’s why there are so many methods to state management, such as Redux, a React framework that manages state through the use of a store and reducers, so only the necessary components will have access to display and change state (which is set in the store). Redux, though, can be challenging to implement and debug, and even with this particular framework, there is a lot of room for improvement when it comes to state management.
At the time of publishing this, Recoil.js is “an experimental state management library for React apps”, according to its GitHub. This exciting Redux framework, released in 2020, is supposed to improve state management. This goes to show how crucial and complex state management is to our Frontend.
How is it different from useState?
useState and useContext may seem similar in that they both are related to state management. useState, in my opinion, is a less stable way of maintaining state. The advantage to useContext is that we can instantiate a variable to useContext, and import it directly into any component. Since this is global state management, we can’t mutate what’s set in useContext. With useState, however, we would have to pass its value down as props, which can easily be changed and lost upon refresh or re-render.
I haven’t used useContext very often. Seeing it put to use, though, made me appreciate how useful this particular React Hook is. It can be tricky to work with state in React, and useContext is a happy medium between class components and Redux. It’s both easy to work with and understand.
That being said, state management is complex, which is why there are constant new technologies being created to improve how we store it. useContext itself is not without its flaws, but overall, I’m looking forward to using this particular React Hook in my future products.
Thank you for reading. I strongly encourage you to check out the below links if you are interested in learning more about useContext.
