Generate Type-Safe React Context Providers

This skill provides expertise in React Context API patterns, TypeScript integration, and modern React state management, creating reliable, type-safe Context providers that follow performance, maintainability, and developer-experience best practices. Core principles cover separation of concerns (splitting state and action contexts to prevent unnecessary re-renders), type safety (TypeScript for compile-time error detection), performance optimization (strategic use of React.memo, useMemo, and useCallback), error boundaries (proper error handling and fallback states), testability (contexts designed to be easily mocked), and composability (providers that combine cleanly).

The basic Context provider structure defines a typed state interface, a context type combining state with action methods, a context created with createContext<T | undefined>(undefined), and a custom hook (useUser) that throws a clear error if used outside its provider. The advanced reducer-based provider pattern defines a discriminated-union action type, a reducer handling each action case immutably, and a provider component using useReducer with useCallback-memoized action creators and a useMemo-memoized context value to avoid unnecessary consumer re-renders.

Performance optimization patterns include context splitting - separate UserStateContext and UserActionsContext so components that only need actions don't re-render on state changes - and a selector pattern for large application state, where useAppSelector takes a selector function and memoizes the derived value, letting components subscribe to just the slice of state they need (e.g. cart item count or current user) rather than the whole state tree. Error handling and loading states use a generic AsyncState<T> shape (data, loading, error) with a reusable async reducer factory handling PENDING/FULFILLED/REJECTED action types consistently across different async resources.

Use this skill when building React Context providers that need type safety, proper separation of state and actions, and performance optimization against unnecessary re-renders. It is well suited to React/TypeScript applications with meaningful shared state (auth, app-wide selectors, async data) to manage via Context. It is not meant for simple prop-drilling scenarios with only one or two levels of components, or for state complex enough that a dedicated state management library (Redux, Zustand) would be a better fit than Context alone.

Input: the shared state/actions needed across a React component tree and its TypeScript types.

Output: a typed Context provider with a custom consumer hook, using a reducer for state transitions and memoization to prevent unnecessary re-renders. Example custom hook with an out-of-provider guard:

export const useUser = () => {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser must be used within a UserProvider');
  }
  return context;
};

Builds directly on React's Context API, useReducer, useMemo, and useCallback hooks, with full TypeScript typing throughout.

React/TypeScript developers building shared state providers, and teams that need performance-conscious Context patterns (state/action splitting, selectors) rather than a single monolithic context causing unnecessary re-renders.