Hooks Fundamentals
useState, useReducer, useRef, closures and the rules of hooks.
- Medium~20 min
The Stale Closure Trap
Why does the alert show the initial count (0) even after clicking the button multiple times? Fix it without…
- Closures
Start Challenge - Easy~10 min
Synchronous State Updates?
What gets logged to the console when the button is clicked? Fix the code so both state updates are applied.
- useState
Start Challenge - Easy~10 min
The Conditional Hook (The Illegal Move)
Why does React throw an error here if isLoading changes from true to false?
- Rules of Hooks
Start Challenge - Easy~10 min
Object Dependency Pitfall
Why does this effect run on every render?
- useEffect
Start Challenge - Medium~20 min
Implementing usePrevious
Write a custom hook usePrevious<T>(value: T) that returns the value from the previous render.
- Custom Hooks
Start Challenge - Easy~10 min
Ref vs State
You need to count how many times a component renders without causing an additional re-render. How?
- Refs
Start Challenge - Medium~20 min
useReducer for Complex State
Why might useReducer be preferred over useState for passing callbacks deeply?
- useReducer
Start Challenge - Easy~10 min
StrictMode Double Invoke
Why does console.log inside useEffect run twice in development?
- StrictMode
Start Challenge - Easy~10 min
The Stale Closure Counter Trap
The counter starts at 0. The user clicks "Start", but the counter gets stuck at 1 and keeps blinking 1…
- Closures
Start Challenge - Hard~35 min
useSyncExternalStore for External State
Create a hook that subscribes to an external store (like a global state manager) using useSyncExternalStore.
- useSyncExternalStore
Start Challenge - Medium~20 min
Type-Safe Reducer with Action Types
The reducer has action type strings scattered everywhere, making it error-prone. Implement a type-safe…
- useReducer
Start Challenge - Hard~35 min
Undo / Redo with useReducer
Build a counter that supports undo and redo. The current value is part of a history stack — undo moves back…
- useReducer
- Undo/Redo
Start Challenge - Medium~20 min
Shopping Cart: useReducer & Money in Cents
A product grid plus a cart panel where every mutation flows through a reducer. The baseline adds products…
- useReducer
Start Challenge - Medium~20 min
Drift-Free Stopwatch & Lap Timer
The baseline stopwatch works but is wrong: every interval tick adds +10ms to the display. Timers aren't exact…
- Timers
Start Challenge - Medium~20 min
Config-Driven Form: fromEntries & Computed Keys
A profile form whose inputs render from the FIELDS config array — but the baseline's state doesn't scale with…
- Forms
Start Challenge - Medium~20 min
Normalize Nested API State
The API returns posts with embedded authors — the same author duplicated across several posts. The baseline…
- React
Start Challenge - Medium~20 min
Multi-Select with Set & Map Lookups
A team picker that already works end-to-end: toggle rows, Select all / Clear, a live count, and a side panel…
- React
Start Challenge - Medium~20 min
Paginated Table: One Reducer, Zero Stale Pages
A paginated product table where filter, sort and page each live in their own useState — and it ships a real…
- useReducer
Start Challenge