Week 9

useReducer

Context API

Error Boundaries

React Hook Form

Practice

Assignment

• Teachers

Front end Track

Content

Let’s get practical

Exercise 1: Refactor a Form with useReducer

Difficulty: Medium Concepts: useReducer, reducer function shape, actions and dispatch, modelling form state

Take the controlled form below — written with multiple useState calls — and refactor it to use a single useReducer.

Starting point — paste this into a new component file:

import { useState } from 'react';

export default function AddConcertForm() {
  const [artist, setArtist] = useState('');
  const [venue, setVenue] = useState('');
  const [date, setDate] = useState('');
  const [ticketPrice, setTicketPrice] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [submitted, setSubmitted] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setIsSubmitting(true);
    setError(null);

    try {
      // Simulate an API call
      await new Promise((resolve) => setTimeout(resolve, 1000));
      if (Math.random() < 0.3) throw new Error('Server error — try again');
      setSubmitted(true);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error');
    } finally {
      setIsSubmitting(false);
    }
  }

  if (submitted) {
    return <p>Concert added!</p>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="artist">Artist</label>
        <input
          id="artist"
          value={artist}
          onChange={(e) => setArtist(e.target.value)}
        />
      </div>
      <div>
        <label htmlFor="venue">Venue</label>
        <input
          id="venue"
          value={venue}
          onChange={(e) => setVenue(e.target.value)}
        />
      </div>
      <div>
        <label htmlFor="date">Date</label>
        <input
          id="date"
          type="date"
          value={date}
          onChange={(e) => setDate(e.target.value)}
        />
      </div>
      <div>
        <label htmlFor="ticketPrice">Ticket Price</label>
        <input
          id="ticketPrice"
          type="number"
          value={ticketPrice}
          onChange={(e) => setTicketPrice(e.target.value)}
        />
      </div>
      {error && <p role="alert">{error}</p>}
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Saving...' : 'Add Concert'}
      </button>
    </form>
  );
}

Requirements:

• Define a State type that combines all six fields (artist, venue, date, ticketPrice, isSubmitting, error) and a submitted flag into a single object
• Define an Action type as a TypeScript discriminated union with at least four action types: UPDATE_FIELD, SUBMIT_START, SUBMIT_SUCCESS, and SUBMIT_ERROR
• Write a reducer function outside the component that handles all four action types and returns a new state object without mutating the existing one
• Replace all seven useState calls with a single useReducer(reducer, initialState)
• The UPDATE_FIELD action should carry a field name and a value in its payload, so a single handleFieldChange function can handle all four inputs
• The submit handler should dispatch SUBMIT_START before the async call, SUBMIT_SUCCESS on success, and SUBMIT_ERROR with the error message on failure — no setIsSubmitting, setError, or setSubmitted calls should remain
• The rendered output must be identical to the starting point: same fields, same loading state, same error display, same success message

Hints:

• Start by writing the State type and initialState before touching anything else — getting the shape right first makes the reducer straightforward to write
• For UPDATE_FIELD, the payload can be { field: keyof State; value: string } — this lets you use computed property syntax in the reducer: { ...state, [action.payload.field]: action.payload.value }
• The discriminated union for Action looks like: type Action = | { type: 'UPDATE_FIELD'; payload: { field: keyof State; value: string } } | { type: 'SUBMIT_START' } | ...
• TypeScript will warn you if your switch statement is missing a case — treat that as a helpful reminder, not an obstacle
• Don't forget default: return state at the end of your switch

Exercise 2: Share State with Context

Difficulty: Easy Concepts: createContext, useContext, Provider, consuming context in a child component

Build a small app with a theme toggle. The toggle lives in one component, and the current theme is displayed in another — without passing props between them.

Requirements:

• Create a ThemeContext using createContext that holds an object with two properties: theme (a string: 'light' or 'dark') and setTheme (the setter function)
• Create a ThemeProvider component that owns a useState for the current theme and wraps its children in the context Provider
• Create a ThemeToggle component that reads theme and setTheme from context using useContext and renders a button that switches between 'light' and 'dark'
• Create a ThemeDisplay component that reads theme from context and renders a <p> saying "Current theme: light" or "Current theme: dark"
• In App.tsx, wrap both components in <ThemeProvider> and render them. Neither component should receive any props

Hints:

• The Provider's value prop is what components receive when they call useContext. If value changes, every consumer re-renders
• createContext needs a default value — since the default is rarely used in practice, an empty object cast to the right type is fine: createContext({} as { theme: string; setTheme: (t: string) => void })
• Both ThemeToggle and ThemeDisplay call useContext(ThemeContext) — they just use different parts of the returned object

Exercise 3: Catch Errors with an Error Boundary

Difficulty: Easy Concepts: Error boundaries, fallback UI, what gets caught and what doesn't

Add an Error Boundary around a component that throws during rendering, so the rest of the page stays visible.

Requirements:

• Install react-error-boundary: npm install react-error-boundary
• Create a BrokenComponent that always throws an error when rendered: throw new Error('Something went wrong')
• Create a fallback component that receives error and resetErrorBoundary as props and renders a short message, the error.message, and a "Try again" button that calls resetErrorBoundary
• In App.tsx, render <BrokenComponent /> wrapped in an <ErrorBoundary> with your fallback component
• Confirm in the browser that the fallback renders correctly instead of a blank screen

Hints:

• Import both ErrorBoundary and your fallback from the right places: import { ErrorBoundary } from 'react-error-boundary'
• Pass your fallback to the boundary like this: <ErrorBoundary FallbackComponent={YourFallback}>
• Clicking "Try again" will immediately throw again since BrokenComponent always throws — that's expected and shows the boundary resetting itself
• In development, React prints the component stack to the console even when a boundary catches the error. This is intentional and only happens in dev mode

Exercise 4: Your First React Hook Form

Difficulty: Easy Concepts: useForm, register, handleSubmit, formState errors, validation rules

Build a simple contact form from scratch using React Hook Form. No useState, no onChange handlers — just register, handleSubmit, and errors.

Requirements:

• Install React Hook Form: npm install react-hook-form
• Create a ContactForm component that uses useForm with defaultValues for all fields
• The form must have three fields: name (text input), email (text input), and message (textarea)
• Register each field with at least one validation rule:
  • name: required
  • email: required, with a pattern rule for a valid email address
  • message: required, minimum 20 characters
• Display each field's error message below its input using errors.fieldName?.message
• On submit, log the form data to the console with console.log(data) and call reset() to clear the fields
• The submit button must be disabled while isSubmitting is true

Hints:

• Spread register onto each input: <input {...register('name', { required: 'Name is required' })} />
• textarea works exactly like input with React Hook Form — just use <textarea {...register('message', ...)} />
• Destructure isSubmitting from formState: const { register, handleSubmit, reset, formState: { errors, isSubmitting } } = useForm()
• The email pattern rule: pattern: { value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: 'Enter a valid email' }
• To see isSubmitting in action, make your onSubmit function async and add await new Promise(r => setTimeout(r, 1500)) before calling reset()

The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0 *https://hackyourfuture.net/*

Built with ❤️ by the HackYourFuture community · Thank you, contributors

Found a mistake or have a suggestion? Let us know in the feedback form.