Managing State in React Application
Managing State in React Application
In this post, I will mention 8 ways to handle state in a React application. And for the
newbies, myself included, a State is simply something that stores a data of the application
that might be changed at some point.
We can see the initially we only had class based components in React, and it was not until
2015 that functional components were introduced to the world.
We won’t discuss which is better and what we should use, but generally, now-a-days
Functional Components are the way to go.
1- URL
This is to store state in a URL. This is useful for tracking the current position of the user in
the application as well as their current settings.
We can share deep links with others using URL to store data.
And to avoid the URL in your app getting out of sync, its useful to avoid storing such
information in the app’s state. We can use the URL as the system of record, read from it as
needed for such information, and can update the URL as needed when the settings change.
The best way to implement this approach is to use React-Router to handle URL-related
state.
2- Web Storage
We can store state in the browser via web storage. This is useful when we want the state
intact when when the site reloads or reboots.
But we need to keep this in mind that data persisted in browser is tied to a single browser.
So, we must avoid storing sensitive data since the user can potentially access the data if
working on a shared machine.
Examples of use: Storing the user’s shopping cart, storing the partially completed data.
3- Local State
We can store the state of the app in React Component state. We need to use this when one
component needs a state.
Example: Form data, component data, lists used by just one component.
A better version of it is derived from it which is..
4- Lifted State
Often the same state is used by multiple state. In order to lift a state, we:
We can use this pattern anytime a few related components need to use the same state.
Lifting states helps in avoiding duplicating states in multiple components, and helps in
making the application consistently reflect all the changes in all the components.
5- Derived State
Sometimes, we do not need to declare/save a state at all. If there are existing values that can
be composed to get us the information we need, we can calculate that information at each
render.
Examples: calling .length on an array to get how many records there are, deriving an
errorsArray boolean by checking if errorsArray is empty.
Why derive?
Deriving state avoids state values getting out of sync, and it simplifies the code as we do
not need to keep separate values in sync.
6- Refs
React supports handling states using Refs as well. There are two scenarios where we can
use these:
To give a DOM element reference: This was their original primary use case and is
why they are called refs. They are useful in managing uncontrolled components,
form input whose values React does not control. Also used for interfacing with third
party libraries which are not purely React.
To store values that are not displayed: Some examples of this are tracking if a
component is mounted, holding a timer, or any data that I want to keep between
renders such as the previous state value. This can be useful for features like undo
and redo.
7- Context
If you have data and functions that are used by your entire app, or by a significant portion
of the app, Context is the way to go.
Using Context, we can avoid passing information down to every component that needs a
given value, prop drilling.
Redux
Mobx
Recoil
There also special state handling techniques to handle special data such as API calls. A few
popular remote state libraries are:
react-query
Swr
Relay
Apollo (when using GraphQL)
Summary