8 ways to Handle State in React
Tags: react, architecture, javascript, frontend
Published: 2023-04-20 13:11:31

## 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 _<u>persist state between page reloads</u>_.
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 <u>lifting the state to a common parent and passing state down via props</u>

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_**](https://dev.to/iamrishavraj1/what-is-react-prop-drilling-and-context-api-cjl).

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](https://legacy.reactjs.org/docs/refs-and-the-dom.html). 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:-
- [React Redux](https://react-redux.js.org/)
- [Mobx](https://mobx.js.org/README.html)
- [Recoil](https://recoiljs.org/)

For managing state that involves handling data from API calls there are other great libraries:-
- [React-Query](https://www.npmjs.com/package/react-query)
- [SWR](https://swr.vercel.app/)
- [Apollo](https://www.apollographql.com/docs/react/) - _For GraphQL_
-[Relay](https://relay.dev/) _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