Reducer + Context Pattern in React

From the React Design Patterns cheat sheet · State Management Patterns · verified Jul 2026

Reducer + Context Pattern

Combine useReducer with Context to share complex state across the component tree (Redux-lite)

jsx

const TasksContext = createContext(null);
const TasksDispatchContext = createContext(null);

function TasksProvider({ children }) {
  const [tasks, dispatch] = useReducer(reducer, []);
  return (
    <TasksContext value={tasks}>
      <TasksDispatchContext value={dispatch}>
        {children}
      </TasksDispatchContext>
    </TasksContext>
  );
}

💡 Split state and dispatch into TWO contexts so dispatchers do not re-render on state changes

⚡ Wrap useContext in custom hooks (useTasks, useTasksDispatch) for ergonomics and type safety

📌 This is the standard "Redux without Redux" pattern - perfect for app-wide state without libraries

🟢 dispatch is stable across renders, so components that only dispatch never re-render unnecessarily

reducercontextstate-management

More React tasks

Back to the full React Design Patterns cheat sheet