We didn’t really define state management. So just to do some formalities —

State management is like keeping track of everything happening in your application.

There are two types of state management

• Local
• Global

Local State Management

It typically involves managing the data within a single component or module of an application. This local state is specific to that component and is not directly accessible or modifiable by other parts of the application unless explicitly passed down as props or through other means.

For example, (everyone’s favorite)

import React, { useState } from "react";

const Counter = () => {
  // Local state variable 'count'
  const [count, setCount] = useState(0);

  // Update local state 'count'
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

On the other hand, we have,

Global State Management

It involves managing data that needs to be accessed and modified by multiple components across the application. This global state is typically stored in a centralized location, such as a global store or context, where it can be accessed and modified by any component that needs it without the need for prop drilling or passing data through multiple layers of components.

Here is an example of global state management using Context API

import React, { createContext, useContext, useState } from "react";

// Create a global context
const CounterContext = createContext();

// Create a provider to manage global state
const CounterProvider = ({ children }) => {
  // Global state variable 'count'
  const [count, setCount] = useState(0);

  // Update global state 'count'
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <CounterContext.Provider value={{ count, increment }}>
      {children}
    </CounterContext.Provider>
  );
};

// Custom hook to access global state and updater
const useCounter = () => {
  return useContext(CounterContext);
};

export { CounterProvider, useCounter };

Next, we import it into the main starting file of the application, wrapping everything inside it. This makes the provider the main parent of the application.

import Counter from "./Counter";
import { CounterProvider } from "./CounterProvider";

const App = () => {
  return (
    <CounterProvider>
      <div className='App'>
        <h1>Counter App</h1>
        <Counter />
      </div>
    </CounterProvider>
  );
};

export default App;

And then utilize or access it in any component whose parent is CounterProvider.

import { useCounter } from "./CounterProvider";

// Component using global state
const Counter = () => {
  // Access global state and updater
  const { count, increment } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

But using Context API isn’t the only solution in React.js. We have many options. Out of which, few have really grabbed industries’ attention by the way they solve some unique problems related to global state management.

Top Global State Management Libraries:

• Redux: Redux helps organize your app's data in one place using actions and reducers.
• Zustand: Zustand is a simple way to handle your app's data using React hooks.
• Context API: Context API shares data across your app without needing extra libraries.
• Recoil: Recoil makes managing data in React easier with atoms and derived states.
• MobX: MobX makes it easy to watch and update your data without extra setup.

It's important to understand that there isn't a single "best" library among the others. Each one offers a unique approach to state management and addresses different problems more effectively.

Rather than debating with developers on Twitter, consider your specific problem and choose the library that best suits your needs.

So, to summarize, the main difference between these types is in the scope of the data being managed.

Depending on your need, make a choice!

0 Comments

Top comments

No Comments Yet

Be the first to share your thoughts and start the conversation.