The State of Things
This week, I received some valuable feedback on how to grow as a developer — and that’s to go back to the basics. I’ve been working with React as a Frontend library, and one of the most important features of React and any Frontend library is state management. There are a number of ways of managing state. In this blog, I’ll review three different methods to do so: useState, Redux, and useContext.
State is one of three key features in React: state, components, and props. State is defined as “a built in object…which allows components to create and manage their own data” (Egyi). I like to think of state as an object that keeps track of how a user interacts with a component, and based on this behavior, may render or display certain information.
useState
The first method of state management is useState, a popular React Hook. This hook “allows you to have state variables in functional components” (LogRocket). useState “returns a stateful value, and a function to update it” (ReactJS). This Hook utilizes local state management. In order to maintain state and allow other components to have access to it, you need to pass it down as props. useState can change on re-render.
import {useState} from 'react'export default function WelcomePage(){
const [counter, setCounter] = useState(0)
const increaseCounter = () => {
setCounter(counter +1)
} return (
<div>
<h3>I've clicked on this button {counter} times</h3>
<button onClick={increaseCounter}>Click here</button>
</div>
)
}
useContext
I wrote about useContext previously, but useContext is another React Hook. Unlike useState, useContext is used to manage and maintain global state management. Once something is assigned to useContext, you can import useContext in any component. The benefit of the useContext hook is that this won’t change on re-render because it is set globally.
import {useContext} from 'react'export const UserContext = React.createContext()export default function WelcomePage(){ const [userInfo, setUserInfo] = useState([]) const fetchAPI = () => {
fetch('https://localhost:3000/[your route here]')
.then(response => response.json())
.then(data => {
setUserInfo(data)
return data
})
} return (
<UserContext.Provider
value={{fetchAPI}}
> {/* other data here */ } </UserContext.Provider>
)
}
Redux
Redux is a React library created to manage state. It’s defined as “a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test” (Ighodaro). State is maintained through a store, and you can designate which components in your app have access to state — and which can change state, using reducers and actions.
There are many benefits to using Redux: it’s easy to debug, it makes state more predictable, and it’s helpful if you need your app to scale up. It is not, however, necessary for all React apps. In fact, Dan Abramov, the co-author of Redux, has said as much: “Come back to Redux if you find a real need for it, or if you want to try something new. But approach it with caution, just like you do with any opinionated tool”.
Please check out the below resources to learn more about state management.
