Deciding Scope: Local vs. Global State in React

Learn when to keep state private and when to share it across your app to build clean, scalable React applications.

📦

Welcome! Let's explore how components manage data, starting with a component's private memory: local state.

// App.js

Local State: The Component's Memory

Local state is data that is managed within a single component. It's the default and simplest way to handle state in React. You create it using the useState hook. This state is completely private; no other component can see or modify it directly. It's perfect for things like form inputs, toggling a modal, or managing a counter within a specific component.

Global State: The Application's Shared Brain

Global state is data that needs to be accessed by multiple, often unrelated, components. Instead of passing this data down through many layers of props (a problem called "prop drilling"), you can place it in a centralized location. React's built-in Context API is a primary way to achieve this, along with powerful third-party libraries like Redux and Zustand.

Deciding Between Local and Global

The key is to start local. Always use useState first. If you find yourself passing the same prop down through three or more levels of components, it's a strong signal to consider "lifting state up" to a common parent. If that parent is very far away, or the data is truly global (like user authentication status or a theme preference), that's the perfect time to reach for a global state solution like the Context API.

The Result: A Clean Architecture

Choosing the right state management strategy is foundational to a clean, scalable, and performant React application. Using local state wherever possible keeps components self-contained and easy to reason about. Using global state judiciously prevents code complexity and makes your app's data flow predictable and maintainable.

Practice Zone

Interactive Test 1: Match the Concept

Match the state management tool to its best use case.

Arrastra en el orden correspondiente.

Arrastra las opciones:

Context API

Prop Drilling

useState

Completa el código:

A single component's internal data______

App-wide user information______

The problem of passing props down many levels______

Unlock with Premium

Interactive Test 2: Complete the Code

Rellena los huecos en cada casilla.

import { createContext, useContext } from 'react';

// 1. Create the context
const ThemeContext = ('light');

// 2. A component that uses the context
function ThemeButton() {
  const theme = (ThemeContext);
  return <button>Current theme: {theme}</button>;
}

Unlock with Premium

Practice Example: From Prop Drilling to Context

Refactor the code below. The `UserAvatar` component gets the `username` via prop drilling. Modify it to use the Context API instead.

Enunciado:

Notice how UserAvatar can now get the username directly without Page or Header needing to know about it. This makes the components much more reusable.

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

import React, { createContext, useContext } from 'react';

// 1. Create the context
const UserContext = createContext(null);

function App() {
  const username = 'AdaLovelace';
  return (
    <UserContext.Provider value={username}>
      <Page />
    </UserContext.Provider>
  );
}

function Page() {
  return (
    <div>
      <Header />
    </div>
  );
}

function Header() {
  return (
    <header>
      <UserAvatar />
    </header>
  );
}

function UserAvatar() {
  // 3. Consume the context value
  const username = useContext(UserContext);
  return <span>{username}</span>;
}

Unlock with Premium

Knowledge Check

What is the most common sign that you might need to switch from local state to a global state solution like Context API?

Unlock with Premium

State Management in Action

Choosing the right state management approach is a pivotal decision in any React project. Here’s how these concepts apply in real-world scenarios.

1. The "Lifting State Up" Principle

Before reaching for a global solution like Context, always consider "lifting state up." If two sibling components need to share state, move that state from one of the children to their closest common parent. The parent then passes the state down as props. This is often all you need for localized state sharing.

// Parent Component
function Dashboard() {
  const [filter, setFilter] = useState('all');

  return (
    <>
      <FilterControls onSetFilter={setFilter} />
      <ItemList currentFilter={filter} />
    </>
  );
}

2. Global State for User Authentication

User information (like name, email, and login status) is a perfect candidate for global state. Many components across your application—the navbar, user profile page, comment sections—will need this data. Placing it in a Context avoids prop drilling and keeps your code clean.

// AuthContext.js
const AuthContext = createContext(null);

// Anywhere in the app...
const { currentUser } = useContext(AuthContext);

return <p>Welcome, {currentUser.name}!</p>

3. Beyond Context: Redux & Zustand

For very large applications with complex state interactions (e.g., e-commerce carts, complex dashboards), the Context API can lead to performance issues, as all consuming components re-render on any state change. Libraries like Redux and Zustand offer more advanced features like memoized selectors and middleware to optimize performance and handle complex logic more effectively.

Practical Takeaway: Master the flow: start with `useState`, "lift state up" to a common parent when needed, and adopt Context API or other global libraries only for truly application-wide data. This tiered approach keeps your app performant and easy to manage.

State Management Glossary

Local State: State that is confined to a single component, created and managed by the `useState` hook. It's the default and most common type of state.
Global State: State that can be accessed and manipulated by multiple components across the application, regardless of their position in the component tree.
Prop Drilling: The undesirable practice of passing props down through multiple layers of nested components that do not need the props themselves, just to get them to a deeply nested child component.
Context API: React's built-in solution for global state management. It provides a way to pass data through the component tree without having to pass props down manually at every level.
Lifting State Up: A common pattern where you move state to the nearest common ancestor of components that need it, and then pass it down via props. It's often the intermediate step before adopting a global state solution.