Introduction
In this blog we will look into 8 techniques used in React to handle state. I will briefly cover each of the method and list down some examples of when a certain state management method can be used.
1) URL
It is the most visible piece of state we can access. URL should be considered as a record; read from it when necessary and update it when needed. It stores the current app location and certain app settings:
- Item we are currently viewing, e.g; record id
- Filters
- Pagination
- Sorting
Having state in the URL helps us to share links to certain parts of our application easily. React Router is an excellent third party library to handle URL state and is widely used in production applications.
2) Web Storage
Some native browser technologies such as:
- local storage
- cookies
- IndexedDB are used to handle application state. These are used to persist state between page reloads. Some of it's usage includes storing shopping cart items, partially completed form data, etc.
3) Local State
When the state is not shared across multiple components and hierarchies, and is used only by one component Local State is the best choice for state management. Just like local variables in a function the state is not accessible outside of this component and is deleted when the component is destroyed.
Useful for storing:
- Checkbox status
- Toggles
- Form data and validation status
4) Lifted State
In case we are dealing with multiple similar components that need access to same data, we should consider lifting the state to a common parent and passing state down via props
Use case:-
We have two child components who need to access the same data, then instead of storing the state on them individually we can lift the state to a common parent component that handles it and pass it down via props.
5)Derived State
We can even derive state from existing state instead of creating a new state altogether. This approach has two advantages:
- Created in sync state which is bug-free.
- Simplifies code for better understading of the state flow.
Examples:-
- Instead of storing a separate state of the count of items for an array, we could simply derive it by using .length array method. No need to update a new state when array contents change.
- Validate a form: We don't need a separate state to store the from validation status, we can simply derive that from the form.
6) Context
Context is used for global state management. The advantage of using context is that it avoids prop drilling.
Best examples of using Context are:-
- User login information.
- Role related information.
- Global app settings such as Themes.
- Internationalization settings.
7) Refs
React does support state management via Refs. Some cases where Refs might be helpful are:
- DOM Reference: Uncontrolled form inputs whose values are not controlled by React.
- State that is not displayed: Component is mounted, Hold Timer, Previous state values for features like undo and redo.
8) Third Party Libraries
Now, to handle state via above method is a great starting point, but as the application grows in size we need to have some state management mechanism in place. That's when Third Party libraries which are built over the above state handling approaches, simplify state management for us.
Some of the famous libraries that are currently used in the market are:-
For managing state that involves handling data from API calls there are other great libraries:-
- React-Query
- SWR
- Apollo - For GraphQL -Relay For GraphQL
Conclusion
I hope you found this compilation of some of the best ways to handle state management in React helpful. Adding all the useful resources related to the above state management techniques in the References below, so do check them out. Feel free to reach out in the comments section.
Happy Coding!
References
- https://legacy.reactjs.org/docs/getting-started.html
- https://pierrehedkvist.com/posts/react-state-url
- https://react.dev/learn/sharing-state-between-components#:~:text=Sometimes%2C%20you%20want%20the%20state,down%20to%20them%20via%20props.
- https://medium.com/comsystoreply/totally-in-sync-using-derived-state-in-react-applications-98cbd5acaa91
Top comments (0)