React Context vs External State Management

This question tests whether you understand the performance characteristics of React Context.

The Core Problem with Context

React Context triggers a re-render for every consumer when the provider value changes. There's no built-in selector mechanism.

const ThemeContext = createContext({ theme: 'dark', fontSize: 16 });
 
function App() {
  const [state, setState] = useState({ theme: 'dark', fontSize: 16 });
  return (
    <ThemeContext.Provider value={state}>
      <Header />
      <Content />
    </ThemeContext.Provider>
  );
}
 
function FontSizeDisplay() {
  const { fontSize } = useContext(ThemeContext);
  // Re-renders even when only `theme` changes!
  return <span>{fontSize}px</span>;
}

When Context Works Well

• Low-frequency updates: Theme, locale, auth status, feature flags
• Small consumer trees: Provider close to consumers
• Read-mostly data: Values that rarely change

When to Use External State

• High-frequency updates: Form state, real-time data, animations
• Selective subscriptions: Only re-render when specific slices change
• Complex derived state: Computed values, caching

Decision Framework

The Hybrid Approach

Most production apps use both:

Context → Theme, Auth, Locale (low-frequency, app-wide)
Zustand → UI state, data cache, forms (high-frequency, selective)
Server state → React Query/SWR (async, cached, synchronized)

Context is a dependency injection mechanism, not a state manager. Treat it accordingly.