How do you prevent Re-render Hell when using React Context in medium-sized applications?

Short answer

Split Context into several small, focused contexts, separate the State Context from the Dispatch Context, and memoize values with useMemo.

Explanation

When any field in a Context object changes, every component that consumes the Context re-renders, even if it uses only a different field that did not change. Solve this by splitting data (for example, UserContext and SettingsContext), separating state from update functions so components that only dispatch events do not re-render, and using useMemo to avoid creating new object references.

Code example

const UserStateContext = createContext<User | null>(null);
const UserDispatchContext = createContext<UserDispatch | null>(null);

export function UserProvider({ children }: { children: React.ReactNode }) {
  const [user, dispatch] = useReducer(userReducer, null);

  return (
    <UserStateContext.Provider value={user}>
      <UserDispatchContext.Provider value={dispatch}>
        {children}
      </UserDispatchContext.Provider>
    </UserStateContext.Provider>
  );
}

Common mistakes

• Putting all application data (user, notifications, theme, cart) in one large central Context.

Follow-up questions

• What is Prop Drilling, and what are the best alternatives?

Sources

• React docs — Passing Data Deeply with Context