Paths/Frontend Engineer/React Fundamentals / Components & State
Move State Into a Hook
A component that fetches its own data cannot be reused or tested. Write the hook that owns the state and the loading flag.
Validator
⏱ 0:00
IDLE — checks run live as you type commands; submit when done
01Requirements
live checks- Directory ~/frontend/src/hooks exists○
- File ~/frontend/src/hooks/useOrders.ts exists○
- The hook uses state and an effect○
- The hook returns the orders and the loading flag○
02Walkthrough
1 of 4 revealed- 01
Create the hooks directory
Hooks get their own folder - a hook that is used twice deserves a name.
mkdir -p ~/frontend/src/hooks - 3 locked · each failed submit reveals one
03Stuck?
0 of 3 revealedTake a hint without losing the lab — each one points at the thing to look at, not at the answer.
04AI Tutor
guides, never solvesTell me what you're stuck on — I'll nudge, not solve. Which requirement are you looking at?
04Notebook
saved locally in this browserlearner@lab — ubuntu:24.04
Session is disposable
↑/↓ recalls commands · Ctrl+Enter submits · type help for the command list