Global State Management

How to share data across your entire application without prop drilling or triggering massive re-renders.

React4 min readConcept 28 of 46

Escaping Prop Drilling

When two distant components (like a Sidebar and a Header) need access to the same state (like isSidebarOpen), you can't easily pass it as a prop.

Global State Management solves this by moving the state completely *outside* of the React component tree into an independent 'Store'.

Any component, anywhere in the app, can connect to this store to read the state or update it.

Why not just use Context?

As we learned in 'The Context Performance Trap', React Context is great for dependency injection, but terrible for fast-changing global state because it forces *all* consumers to re-render whenever the context value changes.

Modern global state libraries (like Zustand, Redux, or Jotai) solve this using a pattern called **Selectors**.

The Power of Selectors

Instead of subscribing to the entire store, a component provides a selector function: const cartCount = useStore(state => state.cartCount);

The library uses this selector to 'subscribe' the component ONLY to that specific piece of data.

If the user changes state.darkMode, the library checks the cartCount selector. Since the cart count didn't change, it prevents the component from re-rendering.

Surgical Re-renders

Watch how a modern global store (like Zustand) updates only the specific components that care about the changed data, leaving the rest of the application completely unaffected.

Zustand Store (Global)
state.theme'light'
state.cart0
React App Tree
Header
(state) => state.theme
Sidebar
(state) => state.theme
CartWidget
(state) => state.cart
Unconnected Component(Does not re-render)

Notice how components provide a 'Selector' to the store. When the Theme changes, only the Header and Sidebar re-render. When the Cart changes, only the Cart Widget re-renders. Context API would force the entire app to re-render in both cases.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1In a modern state library like Zustand, what is the primary purpose of a 'Selector' function (e.g., `state => state.user.name`)?
  2. 2Why are libraries like Zustand often preferred over the native React Context API for complex, frequently updating state?
  3. 3When should you move a piece of state from `useState` into a global store?

Remember this

  • Global state stores live outside the React component tree.
  • They solve the Prop Drilling problem without the performance penalties of Context.
  • Components use Selectors to subscribe to specific slices of state.
  • If unselected state changes, the component does NOT re-render.
  • Keep state local by default; only make it global when necessary.

Done with this concept?

Mark it complete to track your progress. No login needed.