URL state survives a reload, UI state doesn't
The script sorts by price, opens the filter panel, then "reloads" (a new key remounts the router with the last URL). The sort comes back because it lived in the URL. The panel is closed again because it was UI state, and losing it is fine.
Not all state is the same: UI state, form state, server state, URL state and global client state each change for different reasons and each has a best home, so picking the right tool starts with naming the kind.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Classify each piece of data on a blog's post page: the post body, the comment being typed, whether the share menu is open, the current post's slug, the dark-mode setting, the number of comments.
A list page keeps const [page, setPage] = useState(1). Move the page number into the URL so reloads keep it.
Explain it without notes
Name the main kinds of state in a React app and the best home for each.
Why is copying server data into a global store or useState a problem?
How do you decide whether a value belongs in the URL?
What is derived state and why shouldn't you store it?
Preview
Console
Nothing logged yet.Expected console output
URL: /shop | panel open: false
URL: /shop?sort=price | panel open: false
URL: /shop?sort=price | panel open: true
URL: /shop?sort=price | panel open: false