Use Activity Component for Show/Hide
Install this skill
npx skills add vercel-labs/agent-skillsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
The Activity component provides a way to maintain the state and DOM node presence of components during visibility toggles. Unlike standard conditional rendering, which unmounts elements and triggers a full cleanup, Activity suspends the child component's interaction while keeping it alive in the background. This is particularly effective for heavy UI sections like data-rich dashboards, complex forms, or interactive charts that require significant computational cost to re-initialize. By using this, you prevent the recurring expenses associated with life-cycle triggers like useEffect or heavy memoized calculations every time a user shows or hides a sub-view. It optimizes perceived performance by keeping the internal React tree intact while signaling to the runtime that the specific branch is currently inactive, avoiding unnecessary layout recalculations and data refetching.
When to Use This Skill
- •Complex multi-tabbed interface management
- •Expanding and collapsing data-heavy accordion menus
- •Preserving form input values in a hidden modal
- •Maintaining map or canvas context during view switching
How to Invoke This Skill
Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:
- “Stop my component from unmounting when hidden
- “Keep state alive during toggle visibility
- “How to optimize expensive component re-renders
- “Preserve scroll position for dynamic UI tabs
- “Avoid react component cleanup on hide
What this skill does
- •Preserves component internal state across visibility cycles
- •Prevents unmounting of expensive DOM sub-trees
- •Reduces re-render overhead during frequent toggle interactions
- •Maintains scroll position for hidden UI elements
- •Avoids repetitive lifecycle method execution
When not to use it
- ✕Components with minimal rendering cost
- ✕Data-sensitive views that must clear state on close
- ✕Environments where memory usage is extremely constrained
Example workflow
- Identify a component that causes latency when toggled
- Wrap the target component in the Activity tag
- Assign the visibility state to the mode prop
- Verify component state persistence via browser console
- Audit memory footprint to ensure no leaks occur
Prerequisites
- –React 19 or experimental React channel
- –Components with substantial mounting overhead
Pitfalls & limitations
- !Increased memory usage due to dormant component retention
- !May trigger stale data if background updates are not managed
- !Not suitable for components that rely on clean mounts for data fetching
FAQ
How it compares
Unlike standard conditional rendering (which performs unmounts) or CSS-only toggling (which keeps nodes active but lacks lifecycle awareness), Activity gives React explicit intent to manage component state preservation.
📄 Full skill instructions — original source: vercel-labs/agent-skills
Use React's
<Activity> to preserve state/DOM for expensive components that frequently toggle visibility.**Usage:**
import { Activity } from 'react'
function Dropdown({ isOpen }: Props) {
return (
<Activity mode={isOpen ? 'visible' : 'hidden'}>
<ExpensiveMenu />
</Activity>
)
}Avoids expensive re-renders and state loss.
How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/rendering-activity/ - Save the file as
SKILL.md - The agent will automatically discover the skill based on its description.
Option B: Global Installation (All Agents)
Save the file to these locations to make it available across all projects:
- Claude Code:
~/.claude/skills/vercel-labs/agent-skills/rendering-activity/SKILL.md - Cursor:
~/.cursor/skills/vercel-labs/agent-skills/rendering-activity/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/vercel-labs/agent-skills/rendering-activity/SKILL.md
🚀 Install with CLI:npx skills add vercel-labs/agent-skills
