Deciding Scope: Local vs. Global State

"State" is the data that determines how your component renders and behaves. It's the memory of your application. Managing this state is arguably the most critical task in building a React application. A good state management strategy leads to a clean, maintainable, and performant app. A poor one leads to a tangled mess of bugs and unpredictable behavior.

This guide will walk you through the entire spectrum of state management in React, from the simplest component-level state to complex, application-wide global solutions.

1. The Foundation: Local State with `useState`

**Always start here.** Local state is state that is "owned" by a single component. The `useState` hook is your primary tool for this.

• What it is: A hook that lets you add state to functional components.
• When to use it: Any data that only affects this one component and its direct children. Examples:
  • The value of a form input.
  • Whether a modal or dropdown is open.
  • The "on/off" status of a toggle switch.

function ToggleButton() {
  // 'isOpen' is local state. Only ToggleButton knows about it.
  const [isOpen, setIsOpen] = useState(false);

  return (
    <button onClick={() => setIsOpen(!isOpen)}>
      {isOpen ? 'ON' : 'OFF'}
    </button>
  );
}

2. For Complex Local State: `useReducer`

Sometimes, a component's state logic gets complicated. You might have many `useState` calls that all update at the same time, or the next state might depend on the previous one in a complex way. For this, `useReducer` is a better, more organized alternative.

• What it is: A hook for managing state with a reducer function, similar to the Redux pattern.
• When to use it:
  • When you have complex state logic with many moving parts.
  • When the next state depends on the previous state.
  • To optimize performance by passing a `dispatch` function down instead of many state-setting callbacks.

const initialState = { count: 0, step: 1 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + state.step };
    case 'setStep':
      return { ...state, step: action.payload };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <button onClick={() => dispatch({ type: 'increment' })}>
      {state.count}
    </button>
  );
}

3. Sharing State: Lifting State Up

What happens when two components need to share the same state? For example, a filter component needs to tell a list component what to display.

The simplest React pattern is **"Lifting State Up."** You find the closest common ancestor (parent) of both components, move the state and setter function to that parent, and then pass the state and the function down as props.

function App() {
  const [filter, setFilter] = useState('all');

  return (
    <>
      {/* Parent passes state and setter down */}
      <FilterControls currentFilter={filter} onFilterChange={setFilter} />
      <TodoList filter={filter} />
    </>
  );
}

4. The Problem: Prop Drilling

Lifting state up works, but it has a major downside. What if the common parent is 5 levels above the component that needs the data? You have to pass the prop through 4 intermediate components that don't care about it. This is **prop drilling**.

// username prop is "drilled" through Page and Header
function App() {
  return <Page username="test" />;
}
function Page({ username }) {
  return <Header username={username} />;
}
function Header({ username }) {
  return <Avatar username={username} />;
}
function Avatar({ username }) {
  return <span>{username}</span>;
}

Prop drilling is bad because it makes components hard to refactor and tightly couples them to a specific structure.

5. The Built-in Solution: Context API

The Context API is React's built-in solution for prop drilling. It allows you to create a "global" piece of state that any component in the tree can access *without* receiving it as a prop.

1. Create Context: Use `createContext` to create a context object.
2. Provide Value: Wrap a part of your tree (like the whole app) in the `MyContext.Provider` component and pass it a `value`.
3. Consume Value: Any component *inside* that provider can now call `useContext(MyContext)` to get the value.

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

function App() {
  // 2. Provide Value
  return (
    <UserContext.Provider value="test">
      <Page />
    </UserContext.Provider>
  );
}

// Page and Header are no longer involved
function Page() {
  return <Header />;
}
function Header() {
  return <Avatar />;
}

function Avatar() {
  // 3. Consume Value
  const username = useContext(UserContext);
  return <span>{username}</span>;
}

The Big Gotcha: Context is not a performance silver bullet. When the value in a `Provider` changes, **all components** that call `useContext` for that context will re-render, even if they only care about a small part of the value. For high-frequency updates, this can be slow.

6. Beyond Context: Global State Libraries

When your application state becomes very complex (e.g., an e-commerce cart, a social media feed, a complex dashboard), you may outgrow Context. This is where dedicated state management libraries shine.

• Redux (with Redux Toolkit): The classic. Redux provides a single, predictable state container. With Redux Toolkit, it's much easier to use. It's excellent for large teams, complex state, and when you need powerful tools like middleware (for logging, API calls) and time-travel debugging.
• Zustand: A modern, minimalist alternative. It's very fast, has almost no boilerplate, and feels more "React-like" than Redux. It solves the Context performance problem by allowing components to subscribe to only the *slices* of state they care about.
• Recoil / Jotai: These libraries use an "atomic" model, where state is broken into tiny, independent pieces ("atoms"). This can be very intuitive and performant.

Key Takeaway: The State Management Philosophy

1. Start with `useState` for all local state.
2. When siblings need to share state, lift state up to the common parent.
3. If you are prop drilling 3+ levels deep, use Context API for low-frequency, stable data (like theme, auth).
4. If Context causes performance issues or state logic is complex, adopt a dedicated library like Zustand or Redux.