Several fields at once: shallow comparison
ping changes lastSeen, which Card doesn't select: the new { name, city } object is shallow-equal to the last one, so the old object is returned and Card is skipped. rename changes a selected field, so it renders. Without useShallow this selector would loop forever.
Zustand is a tiny external store library: create makes a hook that holds state and actions together, components read slices with selectors and re-render only when their slice changes, and middleware adds saving to localStorage and Redux DevTools.
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.
Write a Zustand useTodos store with todos, add(text) and toggle(id), and a component that shows how many todos are done, re-rendering only when that number changes.
Add persist to useTodos so the list survives reloads under the key todos, saving only the todos array.
Explain it without notes
How does Zustand decide which components re-render after a set?
What is the difference between set(partial), set(fn) and set(state, true)?
Why does Zustand 5 need useShallow for selectors that return objects?
How would you use a Zustand store safely with server rendering in Next.js?
Preview
Console
Nothing logged yet.Expected console output
render Card: Asha from Pune
ping (lastSeen changes)
ping again
rename
render Card: Asha K. from Pune