This video is available to students only

State management in complex apps

Let's take a look at why we often need a centralized state area in our apps and how we can manage updates and changes to it

State management in complex apps#

We’ve come a long way since firing up our very first React app and generating a simple welcome message for our visitors. Now, we’ve arrived at one of the most complex topics you’ll come across in React: Redux.

We’ll learn about the specifics of the Redux state management pattern in the next lesson, but first, we need to talk a little more about why Redux came about. We need to understand state management and why it matters.

When we talk about "state" in this sense, we’re really talking about a set of values that are persisted for the lifetime of our app and across multiple page-views or activities. Out-of-the-box, React (and indeed, JavaScript itself) provide a very limited idea of state.

We’ve already seen this in action with features like the useState Hook. We can store some state in top-level components, send it down to child components, and these child components themselves can have their own state values.

The case for global state management#

All of this is fine, but it doesn’t scale very well and can become cumbersome to manage.

For example, within a localized state model there is a tight coupling between what the user does (their interactions) and changes in state. A change in one place (e.g. marking a notification as read) has an impact on other areas of the app (e.g. in the header notifications area, or their messages view).

 

This page is a preview of Beginner's Guide to Real World React

No discussions yet