# React Activity Component Tutorial: Stateful Tabs (2026) React's `` component (stable since React 19.2) hides UI without unmounting it: children keep their state and DOM, get visually hidden with `display: none`, and have their Effects cleaned up while hidden. Set `mode="hidden"` on initial render and Activity pre-renders content at lower priority before users see it. ## TL;DR In this React Activity component tutorial you'll build a tabbed notes UI three ways — conditional rendering (loses state), CSS `display: none` (leaks live subscriptions), and `` (keeps state, pauses Effects) — then pre-render a hidden tab so it appears faster when the user opens it. Every behavioral claim below was executed as a Vitest + React Testing Library suite against react 19.2.7: 9/9 tests pass, TypeScript strict clean. Budget roughly 25–30 minutes of build time. ## What you'll learn - Why conditional rendering destroys tab state — and why CSS hiding is worse than it looks - How React Activity hidden mode works: state kept, DOM kept, Effects cleaned up - How to preserve tab state in React with `` — a three-line change - How to pre-render hidden UI so the next tab appears with reduced loading time - How to prove all of it with tests, plus the documented caveats most tutorials gloss over (text-only children, `

#state-management

React شرح مكون النشاط: Stateful