javascript 63 lines · 10 steps

Building a form wizard with Context in React

A reducer holds multi-step form state while Context shares it and a guarded hook exposes it to any child.

Explained by highlit

React Intermediate context reducer state-management custom-hook immutable-updates

1import { createContext, useContext, useReducer } from "react";
2 
3const WizardContext = createContext(null);
4 
5const STEPS = ["account", "profile", "review"];
6 
7const initialState = {
8  stepIndex: 0,
9  data: { email: "", password: "", name: "", bio: "" },
10  errors: {},
11};
12 
13function wizardReducer(state, action) {
14  switch (action.type) {
15    case "UPDATE_FIELD":
16      return {
17        ...state,
18        data: { ...state.data, [action.field]: action.value },
19        errors: { ...state.errors, [action.field]: undefined },
20      };
21    case "SET_ERRORS":
22      return { ...state, errors: action.errors };
23    case "NEXT":
24      return {
25        ...state,
26        stepIndex: Math.min(state.stepIndex + 1, STEPS.length - 1),
27      };
28    case "BACK":
29      return { ...state, stepIndex: Math.max(state.stepIndex - 1, 0) };
30    case "RESET":
31      return initialState;
32    default:
33      return state;
34  }
35}
36 
37export function WizardProvider({ children }) {
38  const [state, dispatch] = useReducer(wizardReducer, initialState);
39  const step = STEPS[state.stepIndex];
40 
41  const value = {
42    ...state,
43    step,
44    isFirst: state.stepIndex === 0,
45    isLast: state.stepIndex === STEPS.length - 1,
46    setField: (field, val) =>
47      dispatch({ type: "UPDATE_FIELD", field, value: val }),
48    next: () => dispatch({ type: "NEXT" }),
49    back: () => dispatch({ type: "BACK" }),
50    fail: (errors) => dispatch({ type: "SET_ERRORS", errors }),
51    reset: () => dispatch({ type: "RESET" }),
52  };
53 
54  return (
55    <WizardContext.Provider value={value}>{children}</WizardContext.Provider>
56  );
57}
58 
59export function useWizard() {
60  const ctx = useContext(WizardContext);
61  if (!ctx) throw new Error("useWizard must be used within a WizardProvider");
62  return ctx;
63}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1A reducer centralizes complex multi-step state so every transition is explicit and traceable.
2Bundling state plus action helpers into one Context value gives consumers a clean, intent-revealing API.
3A guarded custom hook turns a missing provider into a loud, immediate error instead of a silent null.

Related explainers

javascript

const express = require('express');
const router = express.Router();
const { pool } = require('../db');
const redis = require('../redis');

Building a health check endpoint in Express

health-check timeouts promise-race

Intermediate 9 steps

javascript

'use client';
 
import { useEffect } from 'react';
import * as Sentry from '@sentry/nextjs';

How a Next.js error boundary recovers

error-boundary error-handling observability

Intermediate 8 steps

javascript

const MAX_BATCH_SIZE = 20;
const FLUSH_INTERVAL = 5000;
const ENDPOINT = '/api/analytics';

Batching analytics events in the browser

batching buffering sendbeacon

Intermediate 10 steps

javascript

export function diffIds(current, desired) {
  const currentSet = new Set(current);
  const desiredSet = new Set(desired);

Diffing sets to sync group membership

set-operations diffing transactions

Intermediate 8 steps

javascript

class HistoryStack {
  constructor(initial = '', limit = 100) {
    this.past = [];
    this.present = initial;

Building an undo/redo history stack

undo-redo state-management debouncing

Intermediate 7 steps

javascript

import { useState, useCallback, useRef } from 'react';
 
function LikeButton({ postId, initialLiked, initialCount }) {
  const [liked, setLiked] = useState(initialLiked);