Paths/Frontend Engineer/State & Data Fetching / Client State
Put Filter State in the URL
State that belongs in the URL is shareable, bookmarkable and survives a refresh. Write the hook that reads and writes it.
Validator
⏱ 0:00
IDLE — checks run live as you type commands; submit when done
01Requirements
live checks- File ~/frontend/src/hooks/useSearchParams.ts exists○
- The hook reads the current search parameters○
- The hook returns a setter that updates the URL○
02Walkthrough
1 of 2 revealed- 01
Write the hook
The hook reads the current parameters and returns a setter. The setter replaces the query string, it does not append to it.
echo 'import { useCallback } from "react";\n\nexport function useSearchParams() {\n const searchParams = new URLSearchParams(window.location.search);\n const navigate = useCallback((next: Record<string, string>) => {\n const params = new URLSearchParams(next);\n window.history.pushState({}, "", "?" + params.toString());\n }, []);\n\n return { searchParams, navigate };\n}' > ~/frontend/src/hooks/useSearchParams.ts - 1 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