Managing state in React Application? Yeah, 8 ways to do it.
No hard and fast rule, choose the one you like.
--
It’s been so long since my last post on Web Development. So, here is another one.
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.
So, as state is out of the way now, let’s dive in.
Methods to save a state
We have a brief history of React.
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.
We will discuss techniques related to Class Components, Stateless functional components, Context API, and hooks for here.
Let me clear Environment variables first, they are environment-specific variables that don’t change and are supported on all operating systems.They are the go-to when we want to set static settings for a given environment.
So, for the saving methods, let’s dive in.
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.
Examples: The current item being viewed, Filter, Sorting 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.
Examples: Cookies, Local storage, and indexedDb. (Native browser things.)
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:
- Declare the state in a common parent component.
- Pass the state down to child components using props.
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.
Examples: Logged in user, Authorisation setting, selected theme.
8- Third Party State
We can save some of the application’s state using a third party state. A few popular options include:
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
I hope this gives you a basic rundown of all the methods, we will explore them soon.
I have plans to write implementing each of the methods and to document the process and pro and cons. Should I do it? Comment below.
Contacts
If you want to keep updated with my latest articles and projects follow me on Medium. These are some of my contacts details:
Happy Learning. :)
