Ninety courses. Six benches.

No state yet. You will build small components, pass data in, and see a render as a function of that data.

• Write a component as a function of its props
• Compose two components without copying markup
• Read a JSX tree and say what the DOM will be

Updates, batching, and the bug where you read state and expect it to have changed already. You will stop storing what you can derive.

• Update state without mutating the previous value
• Derive a value during render instead of storing it
• Explain why a state read can be stale

Before this: Components, from Scratch

Parent renders, state updates, and a component that rendered because its parent did. You will look at the commit rather than guessing.

• Say why a component rendered
• Lift state only as far as the components that need it
• Spot a render caused by a new object identity

Before this: State Is a Snapshot

A beginner course on one sharp edge. Index keys, stable ids, and the input that kept another row's text.

• Choose a key that matches the item's identity
• Explain what breaks when the key is the index
• Reset a row's state when the item actually changes

Before this: State Is a Snapshot

Controlled and uncontrolled, and the form that fights its user because both are trying to own the value.

• Handle an event without reading the DOM afterwards
• Make an input controlled for a reason
• Leave an input uncontrolled when state would add nothing

Before this: State Is a Snapshot

You will take a component full of flags and split it into pieces that compose. The API gets smaller on purpose.

• Replace a pile of boolean props with composition
• Pass a slot without cloning an element
• Keep a component's public API smaller than its internals

Before this: Components, from Scratch

Advanced. Server components, client boundaries, and the fetch that does not belong in an effect. You will draw the line before you write the file.

• Put a client boundary at the smallest component that needs it
• Fetch on the server when the data is ready there
• Explain what a client component ships to the browser

Before this: Rendering, and Why It Happened

Where the request lives, what happens on retry, and the race when the person navigates mid-flight.

• Render loading, error, and ready as separate UI
• Ignore a response that belongs to an old screen
• Retry without duplicating the request logic

Before this: Events and Controlled Inputs

Lifting state, composition, and context for something that is truly ambient. You will remove a provider that did not need to exist.

• Lift state to the nearest shared parent
• Use context for a value that is genuinely ambient
• Remove a provider that was hiding a prop

Before this: Composition over Flags

Advanced. Naming, dependencies, and the hook that became a second component with nowhere to put markup. You will put the logic back if the hook made it worse.

• Extract a hook that does one thing
• Name its inputs so the call site stays honest
• Test the behavior without mounting a whole screen

Before this: Sharing State on Purpose

Queries by role, user events, and the async UI. You will change the implementation and watch the test stay green for the right reason.

• Query a component the way a person finds it
• Assert on what changed on screen
• Refactor a component without rewriting its test

Before this: Events and Controlled Inputs

Measure a slow render, then decide. You will remove memoization that was copying props and calling it performance.

• Find a render that is actually expensive
• Memoize a value only when identity matters
• Delete a memo that was not earning its place

Before this: Rendering, and Why It Happened

A dialog that traps and restores focus, a button that is a button, and a live region that announces the change you just rendered.

• Move focus when a dialog opens and restore it on close
• Expose a name on a control you rendered
• Announce a status change without stealing focus

Before this: Composition over Flags

Button, field, stack, and dialog, documented by their props. Twelve weeks of making the next screen cheaper to build than the last.

• Build a component API another person can use without asking
• Share tokens between components
• Add a variant without a one-off class name

Before this: Composition over Flags

You choose the product. We hold the line on where state lives, what is tested, and whether a keyboard user can finish the main task.

• Ship a multi-screen React interface
• Cover the main task with tests a user could recognize
• Explain where each piece of state lives

Before this: Fetching for a Screen