Eight ways to handle state in a React application

URL

Current app. location/settings.
Enables support for deep linking.
Avoids redundantly storage of data in your beautiful app.
3rd Party Enhancement - React router

Web Storage

To persist states between reloads.
- Cookies
- Locale
- IndexedDB
⚠ Watchout !!!
- Tied to a single browser - i.e. If the same app. will be accessed from a different browser then you have to again store all the data. (we all are familiar with cookies, right!)
- Avoid storing sensitive data.
Use Cases
- Items in a shopping cart.
- Partially filled form data.

Local State

Store state inside a React component. (used when a component needs it)
Use Cases
- Forms
- Toggles
- Local lists

Lifted State

It's literally what its name says. When a state is used by multiple components then we just lift a state to common parent and pass'em down via props.

Derived State

Derive state from existing states/ props.
Example: Like using Array.length rather than assigning a length of the list to a new state variable.
That was a simple example but what derived states?
- Not because it makes code "slick" but to simplify code and avoid sync bugs.

Refs

The DOM reference
- For uncontrolled elements like inputs and other components where React don't control their properties
- Interfacing with non-react libraries.
State that isn't displayed
- Like to track if a component is mounted or not.
- Hold timers.
- Store previous state values (Helps in making features like undo and redo)

Context

#7 of 100DaysOfCode

Atulit Anand ・ Apr 18 '21 ・ 2 min read

#react #100daysofcode #nextjs #javascript

Yep, the same thing that I mentioned the day before.
Global/ broadly used state and functions.
- Avoids prop drilling
Use Cases:
- Login key of the user.
- Authorization settings.
- Theming
- Internationalization settings

Third Parth States

Handling state via third parties to make life chill.
General Options:
- Redux
- Motex
- Recoil
Remote State:
- SWR
- Relay ---|--Both of them goes well with GraphQL
- Apollo --|

Yep and that's all for today.
I wasn't able to do enough today but I am working on it.

I'm sure most of you guys have used them before and this is just a general classification of possible use cases but since we are developers, innovation is in our middle name.😄
You know what I'm saying.

If anyone wants to suggest some more use cases or any add on's or if there are some mistakes in the post, please let me know.
I'll really appreciate that.

Thanks for reading it.😊
Have a beautiful day.🌷