The Story of State Management: Part 1

State refers to the data that can change over time and needs to be tracked to update the UI. This data can include things like user inputs, API responses, or any other dynamic content that influences what the user sees on the screen. State management involves keeping track of how the state changes over time, how it interacts with different components, and how those components update the UI in response to state changes.

Local State Management

Local state management involves maintaining state within the context of a single component. It's pretty straightforward in most JavaScript libraries. In React, the useState hook is typically sufficient for this purpose.

But the main challenge arises when you try to pass state between components, whether horizontally (among sibling components) or vertically (from parent to child components). Handling horizontal sharing of state is straightforward: we can lift the state up to a parent component and pass it down to its children. However, this "passing the parcel" approach—often referred to as prop drilling—is only practical for smaller applications.

Problems with Prop Drilling:

Tight Coupling: Since the second year, we've been taught to maintain low coupling and high cohesion. However, prop drilling creates tight coupling between child and parent components, which is not ideal.

Cluttered Code: When you pass props through several layers of components, the code becomes cluttered and harder to maintain. Components that don't actually need the props still have to pass them down, which can be confusing.

Scalability Issues: In large applications, prop drilling can become unmanageable. If your component hierarchy is deep, managing props across multiple levels can lead to errors and make your app harder to debug.

The only suitable solution is global state management.

Global State Management

Global state management is like using global variables. You create a global object (which can include functions) that all components can use. The story of global state management is interesting. Facebook noticed the problems with managing state locally and came up with "Flux." To solve the issues with Flux, Redux was created, and later, Redux Toolkit made it even easier to use. Before Redux Toolkit, React introduced the Context API as part of React 16.3. Later, more evolved tools like Recoil and Zustand emerged. However, it's not recommended to study global state management tools in the same order they evolved. Instead, start with the Context API and then move on to other relevant tools like Redux Toolkit and Zustand.