This content originally appeared on DEV Community and was authored by atulit023
Eighth Day,
Today I am revisiting react states in greater detail.
And here is what I have learned so far.
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
- 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.?
This content originally appeared on DEV Community and was authored by atulit023
atulit023 | Sciencx (2021-04-19T14:28:32+00:00) #8 of 100DaysOfCode. Retrieved from https://www.scien.cx/2021/04/19/8-of-100daysofcode/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.