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 rendering 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 allows 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 authentication 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 registered and logged-in users. It further allows us to know if a user has paid 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 about how it's 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 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 the 4,5,6th grand-child component. Some of the components may not even need the information but serve as passageways to get information to the grand-child component

Prop drilling can lead to a very poor developer experience, especially when working on large projects. 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 libraries that allow you to properly manage state within your application. These libraries include:

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

There are a lot of other libraries that exist as well but the cool thing is that these libraries 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 separate store that is not attached to a specific component.

The above is the case with Redux -- the context API requires that you store state in a specific 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 separate store)?

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

• If Yes, then we should consider creating a global store for our data thereby allowing multiple components to have access to the data without worrying about prop drilling
• If No, then we can store the data locally -> Store the data within state inside the component

Going back to our scenario of knowing when a user is logged in -- this is a piece of state that multiple components will need to assess so it would make more sense to store this data globally to limit prop drilling. Whereas 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 manage 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

18 views

1