State Management in React
React is broadly said to consist of two main things:-
Components : independent, reusable html code.
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:-
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.
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.
Zustand :
Zustand is a lightweight, fast, and flexible state management library for React with less boilerplate, and excellent for both small and large apps
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
