Scribd
Upload
91 views

Managing State in React Application

The document discusses 8 ways to handle state in a React application: 1) URL, 2) Web Storage, 3) Local State, 4) Lifted State, 5) Derived State, 6) Refs, 7) Context, and 8) Third Party State. Each method is briefly described, such as using the URL to track user position/settings, web storage for persistent data, local state for individual components, and context for globally shared data. Third party libraries like Redux, Mobx, and Recoil are also mentioned for centralized state management.

Uploaded by

LUIS GOYBURO
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
91 views

Managing State in React Application

The document discusses 8 ways to handle state in a React application: 1) URL, 2) Web Storage, 3) Local State, 4) Lifted State, 5) Derived State, 6) Refs, 7) Context, and 8) Third Party State. Each method is briefly described, such as using the URL to track user position/settings, web storage for persistent data, local state for individual components, and context for globally shared data. Third party libraries like Redux, Mobx, and Recoil are also mentioned for centralized state management.

Uploaded by

LUIS GOYBURO
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

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:

 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

You might also like