Top React State Management Libraries – Worth to Discuss

Over the years, React is the most popular frontend javascript library. Startups to big companies are using this technology for the fastest web development. Due to the massive growth of react usage, react introduces different state management concepts from time to time, to overcome the drawbacks of previously introduced concepts. Let’s discuss some of the react state management libraries one by one.

What is State:

The state is a built-in react object which is used to store data or information about the component, also termed components memory in React. You must be thinking, why can’t we use local variables if we just need to store data? Often we need to change the data of a webpage based on some user’s action, when the local variable value changes, React doesn’t rerender the component with the new data but when the state value changes it only re-renders the UI which needs to be updated efficiently by providing fast user experience.

Why Do We Need React State Management Libraries?

Before we dive into the React state management libraries, let’s find out why we need that. React is composed of several components, we use state whether we use functional components or class-based components, we pass data from parent to child component via props. Sometimes data is passed down to a lot of nested components (props drilling problem), when the apps grow the first problem we face is the performance whenever the state changes all the child components get re-rendered. 

import { useState } from "react";

function App() {
 const [isOpen, setIsOpen] = useState(false);

 return (
   <>
<Navbar isOpen={isOpen} closeNavbar={() => setIsOpen(false)} />
   </>
 );
}

This is how we manage local state in a component using useState, if we pass it down to a child we pass it as a prop, as you can see in the above screenshot. We passed isOpen props to the child component Navbar, let’s say we also need isOpen props in child components of Navbar which can be NavbarItem, and so on. In that way we need to pass props to all the child components where it can be useful, then it will be difficult to debug the code if the local state is passed to many nested components. To solve this problem, we need a global state, which we can use in all the components, without Passing down.

Top React State Management Libraries

React Hooks:

React hook is an outstanding feature that comes with a functional component that allows you to use React without creating a class. It provides some default hooks such as useState, useEffect, useReducer, etc.  You can also create custom hooks. We can also use React hooks for state management, we don’t need to install external libraries. React hooks are powerful on their own, other libraries may have some advantages. But if we use ContextApi and ReactHooks it provides a simpler way to manage global state.

ContextAPI:

Context Api is a built-in react feature that provides a way to avoid passing down props to nested children. We use a provider to pass the value to a tree then any nested component can read it. It solves the props drilling problem but the other problem remains the same which is the re-rendering of child components.

import React from 'react';

const ProfileContext = React.createContext({name: ''})

const App = () => {
 const [name, setName] = useState('react');

 return (
   <ProfileContext.Provider value={{ name, setName }}>
     <UserProfile />
   </ProfileContext.Provider>
  );
}

const UserProfile = () => {
 const {name, setName} = React.useContext(ProfileContext);
 return (
   <p>{name}</p>
   <button onClick={()=> setName('angular')}>Update Name</button>
 );
};

You can use this context to get in all the child components and you can also update the value of context with the setter function, so you don’t need to pass data to the child component. To prevent re-rendering, we need third-party libraries such as redux.

useReducer:

It is the hook that is used to manage the state in react. It uses the same concept as redux uses in the reducer. It’s a function that receives two parameters, which are the initial state and the reducer function, then it returns the new state.

import React, { useReducer } from 'react';

const initialState = { open: false };

const reducer = (state, action) => {
 if (action.type === 'toggle') {
   return { open: action.payload };
 }
};

const App = () => {
 const [state, dispatch] = useReducer(reducer, initialState);

 return (
   <div>
     <button onClick={() => dispatch({ type: 'toggle', payload: !state.open })}>
       Toggle
     </button>
   </div>
 );
}

export default App

This is how we can create and update the state using useReducer. If we use useContext and useReducer together, we can easily manage the state. With the help of contextApi all the components can use this state and update it using dispatch. It will make state management easy.

Redux:

Redux is a library that can improve code quality and performance. Redux is one of the famous libraries which is being used for state management. You need to start using  Redux when state management becomes messy.

In redux, you create a store, which holds all the global states of the app. Each component can access the store without passing the props from component to component. There are three core components in redux which are actions, stores, and reducers. With the help of action, you can send data from your application to the store.  Reducers use the current state, perform an action that we specified and return a new state.

Redux ensures that only that component will be re-rendered which needs to be updated. Redux also makes debugging easy by logging actions and states, and easy-to-understand coding errors. For easy debugging, we have redux dev tools extension which provides real-time visualization of actions. You can see every dispatch action detail, you can also replay the actions for time travel debugging, with the help of this tool. Definitely Redux is better for state management, but that doesn’t mean every application needs redux. If you need a state which has to be used in multiple components and a reasonable amount of data is frequently updating, then redux is useful for you otherwise it would be additional complexity and time-consuming to maintain actions and reducers.

Other Libraries:

There are many other libraries that are also available for state management which is: Mobx is also a state management library. It is not only for React. We can use this in other frameworks or libraries. Mobx is an alternative to redux and uses the opposite approach. Mobx uses an observer pattern, you mark your components as observers and then Mobx will update based on the state they are using. It is not being used as a redux. Debugging is not easy as most things are done automatically. It’s easy to use and doesn’t offer much configuration which leads to lesser code. It is useful to build applications quickly.  Recoil is also the state management tool available created by Facebook. It also provides global state management. It’s easy to implement because it’s a Boilerplate free API. it uses the graph structure. It uses two concepts which are atoms and selectors. Atoms are state units that can be updateable and subscribable. When an atom is updated components get re-rendered. Selectors are the derived state, sending the state to a pure function and returning a new state.  Its api is the combination of react use state and context APIs, so it feels similar to react.  Due to similarity, it works well with react.

Conclusion:

In this article, we discuss react state management. React hooks, ContextApi and Redux are widely used for state management. But you need to evaluate all the options based on your project structure. I would say not all apps need third-party libraries for state management. It all depends on your needs and the size of your project.