A Next.js demo showcasing React's Activity component patterns for persisting DOM and React state across hide/show cycles.
| Pattern | Component | What it shows |
|---|---|---|
| DOM State Preservation | FiltersPanel |
<details>, inputs, checkboxes persist when hidden |
| Tabs & Navigation | DataViewer |
List/table views preserve scroll, selection, sort |
| Prerendering Hidden Content | ProductReviews |
Data fetches while hidden, instant reveal |
| Reset on Hide | NewsletterForm |
Shows success message, resets when sidebar hidden |
| Effect Cleanup | LiveTimer |
Interval pauses when hidden, resumes when shown |
| Media Cleanup | VideoPlayer |
Video pauses automatically when hidden |
pnpm install
pnpm devOpen http://localhost:3000.
-
Toggle the sidebar - Expand some filters, type in the search box, then hide/show the sidebar. All state is preserved.
-
Switch between List and Table views - Select an item in list view, sort by price in table view, then switch back and forth. State is preserved in both.
-
Show Reviews - Click "Show Reviews" and they appear instantly (prefetched while hidden).
-
Subscribe to newsletter - Submit the form, see the success message, then hide the sidebar. When you show it again, the form is reset.
-
Watch the timer - Note the elapsed time, hide the sidebar, wait a few seconds, then show it again. The timer paused while hidden.
-
Play the video - Start playback, then click "Hide Video". The video pauses automatically.
- Activity Guide - How to use the Activity component
- React Activity Reference - Official React documentation