When to use a state management library to solve React's render performance issues?

⇦ Home / Jargon Free Introductions

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.

A side-effect of lifting the state up is that it causes unnecessary re-rendering of some components.

Run this code snippet on Stackblitz

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.

A state management library allows us to have a global state while re-rendering only those components that use the changing parts of the global state

Run this code snippet on Stackblitz

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.

On any change to the lifted-up state, every component and its children that use the Context containing the state re-render.

Run this code snippet on Stackblitz

Context API doesn't provide a way to re-render only for a subset of the state changes.

Run this code snippet on Stackblitz

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?

Submit

< of >

Want to be notified when I add a new explainer?

Submit

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.