Server state is a shared cache, not component state
Two components need the user, but there is one network request: both read the same cache entry keyed ["user"]. With useState + useEffect in each component you'd get two requests and two copies that can disagree.
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
Header: loading
PlanBadge: loading
network request #1
Header: Asha
PlanBadge: Pro