Effects & Async
useEffect mechanics, race conditions, cleanup, hydration and data fetching.
- Medium~20 min
Dependency Array Lying
The user fetches successfully, but the component enters an infinite loop of network requests. Why?
- useEffect
Start Challenge - Medium~20 min
useLayoutEffect vs useEffect
You see a flickering UI where an element appears at the top and instantly jumps to the bottom. Which hook…
- useLayoutEffect
- useEffect
Start Challenge - Hard~35 min
Race Conditions in useEffect
A user clicks "User 1" then quickly "User 2". The network for User 1 is slow and arrives after User 2. The UI…
- Race conditions
- useEffect
Start Challenge - Medium~20 min
The Race Condition Fetcher
We have a search bar. If you type "React" quickly, the API calls for "R", "Re", "Rea", etc., fire. If the "R"…
- Race conditions
- Data fetching
Start Challenge - Medium~20 min
The Effect Loop of Death
The app crashes or freezes immediately upon loading due to an infinite render loop.
- useEffect
Start Challenge - Hard~35 min
Hydration Mismatch Fix
The app shows a hydration mismatch error because server-rendered HTML doesn't match client render. Fix it by…
- SSR
Start Challenge - Medium~20 min
Race Condition Prevention with AbortController
This component has a race condition: if the user types quickly, older fetch results may arrive after newer…
- Race conditions
- AbortController
- Data fetching
Start Challenge - Hard~35 min
Resilient WebSocket with Auto-Reconnect
The chat connection drops on flaky networks and never recovers. Build a custom hook that opens a WebSocket…
- WebSocket
Start Challenge - Hard~35 min
Cross-Tab State Sync with BroadcastChannel
When the user updates a setting in one tab, the other open tabs of the app should reflect it instantly. Build…
- BroadcastChannel
Start Challenge - Medium~20 min
Prefetch Data on Hover
Clicking a card opens a detail page that fetches its data, leaving users staring at a spinner. Prefetch the…
- Prefetch
- Data fetching
Start Challenge - Medium~20 min
useMediaQuery — SSR Safe
Build a useMediaQuery(query) hook that's safe in Next.js / any SSR setup. window doesn't exist on the server…
- SSR
Start Challenge - Hard~35 min
Block Navigation with Unsaved Changes
When a form has unsaved changes, the app should warn before the user closes the tab, navigates away, or…
- Navigation
Start Challenge - Hard~35 min
Debounced Typeahead with Race-Condition Guard
Build a search dropdown on top of a working but naive baseline: it queries searchApi (random 150–900ms…
- Race conditions
- Debounce
Start Challenge - Hard~35 min
Optimistic Todos with Rollback
The baseline todo list is pessimistic: every action awaits a mock server (400–1000ms latency, ~20% failures)…
- Optimistic UI
Start Challenge