React useContext Advanced Patterns

Wrap useContext in a custom hook to simplify access and centralise the context logic.

const UserContext = createContext<{ user: User | null; setUser: (u: User | null) => void } | undefined>(undefined);

export function UserProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

export function useUser() {
  const context = useContext(UserContext);
  if (!context) throw new Error("useUser must be used inside UserProvider");
  return context;
}

Throw a descriptive error in the hook when the context is missing to catch misconfigured trees early.

export function useTheme() {
  const ctx = useContext(ThemeContext);
  if (ctx === undefined) {
    throw new Error("useTheme must be called inside ThemeProvider");
  }
  return ctx;
}

Add derived values inside the hook so consumers never repeat the same logic.

export function useAuth() {
  const { user } = useContext(AuthContext)!;
  return {
    user,
    isLoggedIn: !!user,             // derived
    isAdmin: user?.role === "admin", // derived
    displayName: user?.name ?? "Guest", // derived
  };
}

Keep the raw context private — only export the provider and the custom hook.

// auth-context.tsx
const AuthContext = createContext<AuthState | undefined>(undefined); // NOT exported

export function AuthProvider({ children }: { children: React.ReactNode }) { /* ... */ }
export function useAuth() { return useContext(AuthContext)!; } // only hook exported

Export a single hook per context so consumers never call useContext directly.

// consumers call the hook, not useContext — implementation stays hidden
function Profile() {
  const { user, isAdmin } = useAuth(); // clean, type-safe API
  return <div>{isAdmin ? "Admin: " : ""}{user?.name}</div>;
}

Wrap components in their providers inside a test render helper so each test controls exactly what context the component receives.

// test-utils.tsx
import { render } from "@testing-library/react";
import { UserProvider } from "../contexts/UserContext";
import { ThemeProvider } from "../contexts/ThemeContext";

export function renderWithProviders(ui: React.ReactElement, {
  user = null,
  theme = "light"
} = {}) {
  return render(
    <UserProvider initialUser={user}>
      <ThemeProvider initialTheme={theme}>
        {ui}
      </ThemeProvider>
    </UserProvider>
  );
}

Pass initial values to providers via props so tests can control state without mocking global modules.

// In your provider, accept initial state as a prop
export function UserProvider({ children, initialUser = null }) {
  const [user, setUser] = useState(initialUser);
  return <UserContext.Provider value={{ user, setUser }}>{children}</UserContext.Provider>;
}

Test components that consume context by rendering them through the helper.

test("shows welcome message for logged-in user", () => {
  const { getByText } = renderWithProviders(<Navbar />, {
    user: { name: "Alice", role: "admin" }
  });
  expect(getByText("Welcome, Alice")).toBeInTheDocument();
});

Test the provider itself by rendering a consumer inside it and interacting with it.

test("login updates user context", async () => {
  const { getByRole, findByText } = render(
    <UserProvider><LoginForm /><Navbar /></UserProvider>
  );
  await userEvent.click(getByRole("button", { name: "Login" }));
  expect(await findByText("Welcome, Alice")).toBeInTheDocument();
});

Avoid mocking useContext directly — testing through real providers verifies that the full provider+consumer integration works correctly.

Define an async login function inside the provider and expose it through the context value.

export function UserProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(false);

  const login = async (email: string, password: string) => {
    setLoading(true);
    try {
      const result = await authenticate(email, password); // API call
      setUser(result);
    } finally {
      setLoading(false);
    }
  };

  return (
    <UserContext.Provider value={{ user, login, loading }}>
      {children}
    </UserContext.Provider>
  );
}

Store loading and error alongside data in the context value so every consumer can react to async state.

const [state, setState] = useState<{
  data: User | null;
  loading: boolean;
  error: string | null;
}>({ data: null, loading: false, error: null });

// Expose all three so consumers render loading/error UI without local state
<DataContext.Provider value={state}>{children}</DataContext.Provider>

Dispatch async actions through useReducer to keep state transitions predictable and testable.

type Action =
  | { type: "FETCH_START" }
  | { type: "FETCH_SUCCESS"; payload: User }
  | { type: "FETCH_ERROR"; payload: string };

const [state, dispatch] = useReducer(asyncReducer, initialState);

async function fetchUser(id: string) {
  dispatch({ type: "FETCH_START" });
  try {
    const user = await getUser(id);
    dispatch({ type: "FETCH_SUCCESS", payload: user });
  } catch (e) {
    dispatch({ type: "FETCH_ERROR", payload: (e as Error).message });
  }
}

Cancel in-flight async operations on unmount to prevent state updates on unmounted providers.

useEffect(() => {
  const controller = new AbortController();

  async function load() {
    try {
      const res = await fetch("/api/user", { signal: controller.signal });
      setUser(await res.json());
    } catch (e) {
      if ((e as Error).name !== "AbortError") setError("Failed to load");
    }
  }

  load();
  return () => controller.abort(); // cancel on unmount
}, []);

Expose async methods via the custom hook so callers never interact with raw context directly.

export function useUser() {
  const ctx = useContext(UserContext);
  if (!ctx) throw new Error("useUser must be used inside UserProvider");

  // Wrap async method to keep error handling in one place
  const safeLogin = async (email: string, password: string) => {
    await ctx.login(email, password);
  };

  return { ...ctx, login: safeLogin };
}