What performance pitfalls can occur with React Context?

Direct answer

When a provider value changes, components that read that context update; large, frequently changing context values can therefore create broad re-render fan-out.

AppProvider.jsx

function AppProvider({ children }) {
  const [user, setUser] = useState(null);

  const value = { user, setUser };

  return (
    <AuthContext value={value}>
      {children}
    </AuthContext>
  );
}

Provider value identity: a newly created object can represent a changed context value on each provider render.
Large contexts: unrelated consumers may update together when one field changes.
Design options: keep providers focused, split independent contexts, separate state from dispatch when useful, and profile before adding memoization.