Introduction to State Management

As an application gets larger and more complex, we start to run into situations where a given piece of state needs to be used in multiple components. A state can be the information that our app works with—for example, the details of the logged-in user or the current “state” of some parts of the UI, such as whether a particular piece of functionality is disabled or data is being loaded.

A common solution is to “lift” that piece of state out of the component where it’s being used and into the nearest parent. This can work fine when the components are close siblings, and the state doesn’t reside too far up the tree, but otherwise, it can lead to what’s called prop drilling—having to pass down props through several layers of components that don’t need the props in order to get to one that does.