Activity Patterns Demo

A Next.js demo showcasing React's Activity component patterns for persisting DOM and React state across hide/show cycles.

Patterns Demonstrated

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

Getting Started

pnpm install
pnpm dev

Open http://localhost:3000.

Try It Out

1. Toggle the sidebar - Expand some filters, type in the search box, then hide/show the sidebar. All state is preserved.

2. 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.

3. Show Reviews - Click "Show Reviews" and they appear instantly (prefetched while hidden).

4. Subscribe to newsletter - Submit the form, see the success message, then hide the sidebar. When you show it again, the form is reset.

5. Watch the timer - Note the elapsed time, hide the sidebar, wait a few seconds, then show it again. The timer paused while hidden.

6. Play the video - Start playback, then click "Hide Video". The video pauses automatically.

Learn More

• Activity Guide - How to use the Activity component
• React Activity Reference - Official React documentation