State kept, effects paused
Going Home disconnects the chat (the effect cleanup ran) but keeps the input in the DOM with display: none. Chat also renders once while hidden, at low priority, after the visible update is committed. Coming back reconnects, and the draft "Hi" is still there. With {tab === "chat" && <Chat />} the draft would be gone.
<Activity mode="visible" | "hidden"> hides part of the UI without unmounting it: hidden content keeps its state and DOM (hidden with display: none), its effects are cleaned up while hidden and re-created when shown, and React can pre-render hidden content in the background at low priority.
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.
Build tabs "Profile" and "Settings" where each tab keeps its form input when you switch away and back.
A hidden VideoPlayer keeps playing sound after its tab is hidden with Activity. Fix it.
Explain it without notes
What problem does <Activity> solve that conditional rendering and CSS hiding don't?
What happens to state, DOM and effects when an Activity becomes hidden, and when it becomes visible again?
What is pre-rendering with Activity, and what are its limits?
When should you not use Activity?
Preview
Console
Nothing logged yet.Expected console output
Chat rendered, draft = ""
Chat effect: connect
Chat rendered, draft = "Hi"
--- go Home
Chat effect: disconnect
Chat rendered, draft = "Hi"
Input still in the DOM: true | display: none
--- back to Chat
Chat rendered, draft = "Hi"
Chat effect: connect
Draft value: Hi