Week 9

useReducer

Context API

Error Boundaries

React Hook Form

Practice

Assignment

• Teachers

Front end Track

Week 9 Overview

By week 9, you've been managing state with useState for a while and you've probably started to feel where it breaks down. A handful of related fields, conditional updates, and branching logic quickly turn a clean component into something hard to reason about. This week sharpens your instincts for when state management needs more structure, and gives you the tools to provide it. You'll work through useReducer for complex local state, the Context API for sharing that state across a component tree, and Error Boundaries for containing failures gracefully. Then you'll finish by using React Hook Form, a library that makes you question how much form state you were managing by hand that you never needed to.

The main concept this week is the gap between "this works" and "this scales." useReducer gives you a predictable shape for state transitions instead of scattered setState calls. Context lets you lift that state without the prop drilling that makes components brittle. Error Boundaries draw a hard line around failures so one broken feature doesn't take down the page. And React Hook Form hands off an entire category of boilerplate (registration, validation, error display) to something purpose-built for it. Each tool this week is a response to a real pain point you've either already hit or are about to.

By the end of the week you'll have refactored a form twice: first from useState to useReducer, then from useReducer to React Hook Form. That progression is intentional. Understanding what the library is doing for you requires having done it yourself first.

Learning Goals

• Choose between useState and useReducer based on state shape, and write a correctly typed reducer function with a discriminated union of action types
• Model complex form or UI state using dispatch and named actions, replacing ad-hoc setState calls with explicit, readable state transitions
• Share state across a component tree using the Context + useReducer pattern, and structure providers to avoid unnecessary re-renders
• Place Error Boundaries at the feature level to contain failures without disrupting unrelated parts of the UI, and identify what they do and don't catch
• Register inputs with React Hook Form, apply validation rules, and display error messages — then articulate what manual state management it replaces

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.