State Management in React

React is broadly said to consist of two main things:-

1. Components : independent, reusable html code.

2. State : The dynamic values which on changing, re-render the component only.

So, in React it becomes crucial to handle these values properly, so that problems like unconditional rendering does not occur. To handle these values, we use:-

1. useState Hook :

   It is used when the scope of that state is only in the component.

   When there are very less components, so prop drilling is easy and manageable.

2. useContext Hook :

   It is used when the scale of the application increases when there are many components, and prop drilling becomes hectic. Then we use createContext Hook which create a global Context which is made accessible to the whole application, no requirements of passing props, where ever a state is required is can be accessed by useContext hook.

3. Zustand :

   Zustand is a lightweight, fast, and flexible state management library for React with less boilerplate, and excellent for both small and large apps

4. Redux:

   Redux helps manage global state in React apps, especially when multiple components need access to the same data (e.g., user info, theme, cart items, etc.).

   It follows a centralized store pattern with these concepts:

   • Store → holds your global state.

   • Actions → describe "what happened".

   • Reducers → specify how the state changes.

   • Dispatch → sends an action to the reducer