Pre-rendering a tab before it's opened
Reports rendered and created its DOM while hidden, but its effect didn't run. Clicking only reveals it (and re-renders it, because its parent rendered): the effect runs now, when it's visible.
<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
App rendered
Reports rendered
Reports list already in the DOM: true
--- click Show reports
App rendered
Reports rendered
Reports effect ran: now visible