Forms & Inputs
Controlled inputs, validation, useActionState, debounce and accessible forms.
- Medium~20 min
Controlled vs Uncontrolled Components
The form input doesn't reset when clicking the reset button. Fix it by converting to a controlled component…
- Forms
Start Challenge - Hard~35 min
Optimistic UI Updates
The todo app feels slow because it waits for the server before updating the UI. Implement optimistic updates…
- Optimistic UI
Start Challenge - Medium~20 min
Controlled Form with Real-time Validation
Build a registration form with real-time validation that shows errors as the user types, but only after…
- Forms
Start Challenge - Easy~10 min
Accessible Forms with useId
Form labels aren't properly associated with inputs, breaking screen reader accessibility. Generate unique…
- useId
- A11y
- Forms
Start Challenge - Easy~10 min
Debounced Search Input
The search input fires an API request on every keystroke, causing performance issues and rate limiting.
- Debounce
- Forms
Start Challenge - Hard~35 min
Form with useActionState (React 19)
Refactor this controlled form to use React 19's useActionState hook. The action receives the previous state…
- useActionState
- Forms
Start Challenge - Medium~20 min
Debounced Auto-Save (with Cancel)
Every keystroke fires a save request. Debounce the save so it only triggers after the user pauses for 600ms —…
- Debounce
Start Challenge - Medium~20 min
Multi-Step Form Wizard with Validation Gates
A 4-step wizard — Account → Profile → Preferences → Review — where the baseline navigates freely with zero…
- Forms
Start Challenge - Hard~35 min
CSV Import Wizard: Parse, Map, Validate
A four-step import wizard: paste CSV → parse → map columns → validate → import. The baseline only parses and…
- React
Start Challenge