The main pitfall is that all components consuming a context via , even if the specific data they use hasn’t changed. This happens because the provider usually passes a new object reference on each render.
What are the Avoidance Strategies of Context API pitfall?
Split Contexts: Create smaller, more focused contexts instead of one large global context. Components subscribe only to the context they need.
Memoize the Context Value:
Wrap the value object passed to the Provider in useMemo (and memoize functions within it using useCallback) so its reference only changes when its actual contents change.
Use Libraries with Selectors:
State management libraries (Zustand, Jotai) or use-context-selector allow components to subscribe only to specific slices of the context state.
Problem: Every consuming component re-renders when any value in context changes.
Fix:
- Split contexts (AuthContext, ThemeContext)
- Use memoization:
Example:
// AuthProvider.js
const AuthContext = createContext(null);
export const AuthProvider = ({ children }) => { const [user, setUser] = useState(null); const logout = () => { /* logout logic */ }; const value = useMemo(() => ({ user, logout }), [user]); return ( <AuthContext.Provider value={value}> {children} </AuthContext.Provider> );
};
