Global State and Its Importance

Introduction

State management is a core concept in React. It determines how data flows through an application and how UI updates in response to changes. While local component state is sufficient for small applications, as applications grow in complexity, developers often need a global state that can be accessed and updated from multiple components.

This post explores the concept of global state, its importance, differences with local state, common problems with state sharing, and introduces solutions like the Context API and Redux.

---

1. Difference Between Local and Global State

Local State

Local state is the state managed within a single component using hooks like useState or class component state.

Example:

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
<div>
  <h1>Count: {count}</h1>
  <button onClick={() => setCount(count + 1)}>Increment</button>
</div>
  );
}

export default Counter;

• The count variable exists only within the Counter component.
• Other components cannot access or modify count.

Characteristics of Local State:

• Scoped to a single component.
• Simple and easy to manage.
• Ideal for temporary UI data like form inputs, toggle switches, or modal visibility.

---

Global State

Global state refers to data that multiple components across the application need to access or modify.

Example Scenarios:

• User authentication data (current logged-in user)
• Theme (light/dark mode) across the application
• Shopping cart items in an e-commerce site
• Language preferences for localization

Key Characteristics:

• Accessible by multiple components.
• Changes in global state reflect across all consuming components.
• Centralized and often requires a state management solution.

---

2. When Global State is Needed

Not every state needs to be global. Determining when to use global state is important to avoid unnecessary complexity.

Use global state when:

1. Multiple components need access to the same data.
2. Data changes in one component should immediately reflect in others.
3. Passing data through several layers of components (prop drilling) becomes cumbersome.
4. Data must persist across different pages or parts of the application.

Example: User Authentication

// A user object stored globally
const user = {
  name: "Alice",
  role: "admin",
};

// Multiple components like Dashboard, Navbar, and Profile need access

Without global state, developers would have to pass user through props from parent to child components repeatedly, leading to prop drilling.

---

3. Problems With Sharing State Across Multiple Components

Managing state manually in multiple components can lead to several challenges:

3.1 Prop Drilling

Prop drilling occurs when you pass state through multiple intermediate components that do not need it.

function App() {
  const user = { name: "Alice" };
  return <Parent user={user} />;
}

function Parent({ user }) {
  return <Child user={user} />;
}

function Child({ user }) {
  return <Navbar user={user} />;
}

function Navbar({ user }) {
  return <h1>Welcome, {user.name}</h1>;
}

• Parent and Child only exist to pass props to Navbar.
• This approach is tedious and hard to maintain in large applications.

---

3.2 Inconsistent Data

Without a global state, different components may hold separate versions of the same data, leading to inconsistencies.

Example:

• A shopping cart component holds items locally.
• The checkout page also holds its own local copy of items.
• Changes in one component may not reflect in the other, causing errors.

---

3.3 Difficult Debugging

• Tracking the source of state changes across multiple components can be difficult.
• Multiple copies of the same data increase the risk of bugs.

---

3.4 Repetition of Logic

• Without global state, shared logic such as updating a user profile or theme must be repeated in multiple components.
• This violates the DRY (Don’t Repeat Yourself) principle.

---

4. Solutions for Global State

There are several approaches to solving the challenges of managing global state in React applications:

---

4.1 Context API

React’s Context API allows you to share data globally without passing props through every level of the component tree.

Creating Context:

import React from "react";

const ThemeContext = React.createContext("light");

export default ThemeContext;

Providing Context Values:

import React, { useState } from "react";
import ThemeContext from "./ThemeContext";
import Navbar from "./Navbar";

function App() {
  const [theme, setTheme] = useState("light");

  return (
<ThemeContext.Provider value={{ theme, setTheme }}>
  <Navbar />
</ThemeContext.Provider>
  );
}

Consuming Context:

import React, { useContext } from "react";
import ThemeContext from "./ThemeContext";

function Navbar() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
<div style={{ background: theme === "light" ? "#fff" : "#333", color: theme === "light" ? "#000" : "#fff" }}>
  <h1>Navbar</h1>
  <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>Toggle Theme</button>
</div>
  );
}

Advantages:

• Eliminates prop drilling.
• Simple and built into React.
• Ideal for medium complexity apps with a few global values.

Limitations:

• Not ideal for high-frequency updates (e.g., large forms, real-time data).
• Can become less performant if many components consume rapidly changing context.

---

4.2 Redux

Redux is a popular state management library that centralizes global state in a store.

Key Concepts:

1. Store – Holds the application state.
2. Actions – Objects describing what happened.
3. Reducers – Functions that determine how state changes in response to actions.

Example:

// actions.js
export const increment = () => ({ type: "INCREMENT" });

// reducer.js
export const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
case "INCREMENT":
  return { ...state, count: state.count + 1 };
default:
  return state;
  }
};

// store.js
import { createStore } from "redux";
import { counterReducer } from "./reducer";
export const store = createStore(counterReducer);

Using Redux in Components:

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment } from "./actions";

function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

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

Advantages of Redux:

• Centralized and predictable state management.
• Ideal for large applications with complex state.
• Supports time-travel debugging and middleware for side effects.

Trade-offs:

• Adds boilerplate code.
• Can be overkill for small applications.

---

4.3 Other Solutions

• Zustand – Lightweight alternative to Redux with simpler API.
• Recoil – State management for React that supports atom-based state sharing.
• MobX – Reactive state management library.

Each solution has its strengths and is chosen based on application size, complexity, and developer preference.

---

5. Guidelines for Choosing Between Local and Global State

1. Start with Local State:
   • Use useState or useReducer for state confined to a single component.
2. Use Global State When:
   • Data needs to be shared across multiple components.
   • Prop drilling becomes complex or messy.
   • Consistency across components is critical.
3. Choose Context API for:
   • Simple, medium-complexity applications.
   • Sharing themes, authentication data, or UI settings.
4. Choose Redux or Other Libraries for:
   • Large applications with complex state interactions.
   • Real-time data updates, complex data structures, or multiple reducers.