The guide to why you should manage your state within react

State Management React

What is it? Why should I care about it? and how do I properly manage state within my app?

Okay we'll get to all of that but lefts first talk about state.

What is state?

State is just data that changes over time.

In the case of front ends, we can make our application or UI react to these changes so that we can use something like conditional redenring to show or hide a certain feature.

For example, think of a modal; A modal has two options or two states. A modal can either be opened or closed. Knowing the state of that modal allos us to use conditional rendering to either show or hide the modal using css.

An even more complicated example is knowing when a user has logged into your application. There are a lot of different authethication workflows but ultimately it boils down to getting this user object from your backend api, finding a way to store the state so that you can persist it through the application for other components to have knowledge of whether a user is logged in. Knowing when a user is logged into our application is crucial because it allows us to only show features of our application to registerd and logged in users. It further allows us to know if a user has pay to see a specific kind of information.

Why should state be properly managed?

Okay okay, knowing what the definition of state and what it allows us to do is cool but why should I as a developer care how its managed? It's not like the end user may even notice a difference. Properly managing state within your application leads to:

1. A better developer experience
2. Makes it easier to access information when it is needed by a specific component

If you've been working with react for a while, you'll recall that one of the first concepts you learn is props. So you might be wondering, can't we just pass information through props to the components that need it? I mean yes you can absolutely do that and it is a very viable option but it leads to something known as prop drilling.

Prop drilling is when information is passed from a parent component to 4,5,6th grand-child component. Some of the components may not even need the information but serve as passage ways to get information to the grand-child component

Prop drilling can lead to a very poor developer experience, espicially when working on large projects so you might be wondering if there are any other ways to manage state within an application?

How do i properly manage state?

There are various state management libaries that allow you to properly manage state within your application. These libaries include:

• Context API
• Redux & Redux Toolkit
• Recoil
• A lot of other libaries exist as well

There are a lot of other libaries that exist as well but the cool thing is that these libaries allow you to decouple your data from the components. So instead of having the component responsible for storing the data/state, the data can be stored in a seperate store that is not attached to a specific component.

The above is the case with Redux -- the context API requries that you store state in a spefic component and then any child of that component will have access to the store.

Any component that needs assess to the data can go to the store, retrieve the information, and then display it in the UI. Any time the information changes, it will be updated in the store, which is then reflected in the UI.

The question then becomes when do I store state locally (state defined within the component) and when do i store state globally (state that is often stored within a seperate store)?

To answer this question, I personally answer another question: Do multiple components need access to this data?

• If Yes, then we should store the data globally -> Set up a store that multiple components have access too
• If No, then we can store the data locally -> Store the data within state inside the component

Going back to knowing when a user is logged in, this is a piece of state that multiple components will need assess too so it would make more sense to store this data globally to limit prop drilling. Where as with the modal example, it would make more sense to store that state within the component unless there is some other feature that requires knowledge of the state of the modal.

Conclusion

We've just looked at state management as a whole and why it is important to mange state within your application.

Hope you found this useful, don't forget to smash the like button and I'll catch you in the next one... Peace