How to Efficiently Manage State in React
If you’ve written a lot of React code, chances are you’ve used state incorrectly. One common mistake a lot of React developers do is storing states globally in the application, instead of storing them in the components where they’re used.
Learn how you can refactor your code to utilize local state and why doing so is always a good idea.
Basic Example of State in React
Here’s a verysimple counter applicationthat exemplifies how the state is typically handled in React:
On lines 1 and 2, you import theuseState()hook for creating the state, and theCountercomponent. You define thecountstate andsetCountmethod for updating the state. Then you pass both down to theCountercomponent.
TheCountercomponent then renders thecountand callssetCountto increment and decrement the count.
You didn’t define thecountvariable andsetCountfunction locally inside theCountercomponent. Rather, you passed it in from the parent component (App). In other words, you’re using a global state.
The Problem With Global States
The problem with using a global state is that you’re storing the state in a parent component (or parent of a parent) and thenpassing it down as propsto the component where that state is actually needed.
Sometimes this is fine when you have a state that is shared across lots of components. But in this case, no other component cares about thecountstate except for theCountercomponent. Therefore, it’s better to move the state to theCountercomponent where it’s actually used.
Moving the State to the Child Component
When you move the state to theCountercomponent, it’d look like this:
Then inside yourAppcomponent, you don’t have to pass anything down to theCountercomponent:
The counter will work exactly the same as it did before, but the big difference is that all of your states are locally inside thisCountercomponent. So if you need to have another counter on the home page, then you’d have two independent counters. Each counter is self-contained and takes care of all of its own state.
Handling State in More Complex Applications
Another situation where you’d use a global state is with forms. TheAppcomponent below passes the form data (email and password) and the setter method down to theLoginFormcomponent.
TheLoginFormcomponent takes in the login information and renders it. When you submit the form, it calls theupdateDatafunction which is also passed down from the parent component.
Rather than managing the state on the parent component, it’s better to move the state toLoginForm.js, which is where you’ll use the code. Doing so makes each component self-contained and not reliant on another component (i.e. the parent) for data. Here’s the modified version of theLoginForm:
Here you bind the input to a variable usingrefattributes and theuseRefReact hook, rather than passing the update methods directly. This helps you remove verbose code andoptimize the form performance using the useRef hook.
In the parent component (App.js), it’s possible to remove both the global state andupdateFormData()method because you no longer need it. The only function left isonSubmit(), which you invoke from inside theLoginFormcomponent to log the login details on the console.
Not only did you make your state as local as possible, but you actually removed the need for any state at all (and usedrefsinstead). So yourAppcomponent has gotten significantly simpler (having just one function).
YourLoginFormcomponent also got simpler because you didn’t need to worry about updating the state. Rather, you just keep track of tworefs, and that’s it.
Handling Shared State
There’s one issue with the approach of trying to make the state as local as possible. You’d often run into scenarios where the parent component doesn’t use the state, but it passes it to multiple components.
An example is having aTodoContainerparent component with two child components:TodoListandTodoCount.
Both of these child components require thetodosstate, soTodoContainerpasses it to both of them. In scenarios like these, you have to make the state as local as possible. In the above example, putting it inside theTodosContaineris as local as you’re able to get.
If you were to put this state in yourAppcomponent, it would not be as local as possible because it’s not the closest parent to the two components that need the data.
For large applications, managing the state just with theuseState()hook can prove to be difficult. In such cases, you may need to opt for theReact Context APIorReact Reduxto effectively manage the state.
Learn More About React Hooks
Hooks form the foundation of React. By using hooks in React, you may avoid writing lengthy code that would otherwise use classes. The useState() hook is unarguably the most commonly used React hook, but there are many others such as useEffect(), useRef(), and useContext().
If you’re looking to become proficient at developing applications with React, then you need to know how to use these hooks in your application.
Learn to manage state and cut code with React Hooks.
Taming data is easier than it looks.
Not all true crime is about hacking, slashing, and gore.
OneDrive is one of the best, but it has a catch.
Don’t let aging hardware force you into buying expensive upgrades.
You can’t call this offline, Notion.
