What are the common pitfalls of React context?

React

The short answer

The biggest pitfalls with React context are unnecessary re-renders (every consumer re-renders when the context value changes), putting too much state in a single context, creating new object references on every render, and using context for frequently changing values. Context is great for rarely-changing data like themes and auth, but it can cause performance problems if misused.

Pitfall 1: Every consumer re-renders

When a context value changes, every component that uses that context re-renders — even if it only uses a small part of the value.

const AppContext = createContext();
function AppProvider({ children }) {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');
  return (
    <AppContext.Provider
      value={{ user, theme, setUser, setTheme }}
    >
      {children}
    </AppContext.Provider>
  );
}
// This re-renders when theme changes, even though it only uses user
function UserProfile() {
  const { user } = useContext(AppContext);
  return <p>{user?.name}</p>;
}

When theme changes, UserProfile re-renders because the entire context value changed — even though UserProfile only reads user.

The fix is to split unrelated data into separate contexts so that changes to one do not affect consumers of the other.

Pitfall 2: Creating new references on every render

// Bad — new object on every render
function AppProvider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <AppContext.Provider value={{ count, setCount }}>
      {children}
    </AppContext.Provider>
  );
}

Every time AppProvider re-renders, { count, setCount } creates a new object. Even if count has not changed, all consumers re-render because the object reference is different.

The fix is to memoize the value object with useMemo so it only changes when the actual data changes.

Pitfall 3: Using context for frequently changing values

Context is not designed for values that change many times per second (like mouse position, scroll position, or animation frames). Every change triggers re-renders in all consumers.

// Bad — updates on every mouse move, all consumers re-render
function MouseProvider({ children }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  useEffect(() => {
    const handler = (e) =>
      setPosition({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handler);
    return () =>
      window.removeEventListener('mousemove', handler);
  }, []);
  return (
    <MouseContext.Provider value={position}>
      {children}
    </MouseContext.Provider>
  );
}

For high-frequency updates, use a state management library like Zustand or Jotai that supports selective subscriptions.

Pitfall 4: Deep nesting of providers

// Provider hell
<AuthProvider>
  <ThemeProvider>
    <LanguageProvider>
      <NotificationProvider>
        <CartProvider>
          <App />
        </CartProvider>
      </NotificationProvider>
    </LanguageProvider>
  </ThemeProvider>
</AuthProvider>

This gets hard to read and maintain. You can compose providers into a single component to clean it up, but the deeper issue might be that you are using context for things that would be better handled by a state management library.

Common Pitfalls

A common mistake is using React context as a replacement for state management libraries like Redux or Zustand. Context is a dependency injection tool — it lets you pass data down without prop drilling. It is not optimized for frequent updates or complex state. If you find yourself putting lots of state into context and dealing with re-render issues, consider a dedicated state management library.

Interview Tip

The most important pitfall to explain is the re-render problem. Show the example where changing one value causes all consumers to re-render, then show the fix (splitting contexts or memoizing). If the interviewer asks when not to use context, the answer is: for frequently changing values and complex state logic.

Why interviewers ask this

Context is one of the most misused React features. Interviewers ask about pitfalls to see if you have experienced performance problems with context and know how to avoid them. A candidate who can explain the re-render issue and when to use context vs a state library shows real-world React experience.

Table of Contents