Why do we need a state management library in React?
What problem are we trying to solve here? It's about preventing React from unnecessarily re-rendering our components.
We commonly build views where a certain data is accessed in multiple components.
Data accessed in multiple components needs to be handled in a higher level component.
Handling data accessed in multiple components in a common component = Lifting the state up.
So, the unneeded re-renders triggered from lifting the state up is what we are trying to solve here. Next, we need to understand how a state management library solves this.
With a state management library, our lifted up state doesn't cause re-render of those children components that don't use the changing parts of the state.
But can't we use React's useContext to solve this? No, React's Context API only enables us to avoid prop-drilling. It doesn't prevent the re-renders.
But, this doesn't mean we use a state management library for every situation where we have a global top-level state at the top.
We don't need to optimize state management if our global state changes in-frequently or if it causes only a few components to re-render.
Also, depending on the kind of state we seek to manage, there are different kinds of state management library available for us to use.
For state based on data on the server, there are libraries like react-query, swr, redux-query. And, for state based on browser-side activities (that doesn't need to be synced to the server), there are libraries like Zustand, Redux Toolkit, Jotai.
Want to be notified via email when a new explainer is added?
< of >
Want to be notified when I add a new explainer?
I create about one or two of these every month (whenever I find time between my webdev work) & you can unsubscribe at any time. 💨
Copyright (c) 2017-2024 Tezify All Rights Reserved. Created in India. GSTIN : 24BBQPS3732P1ZW.