1---
2title: Use Activity Component for Show/Hide
3impact: MEDIUM
4impactDescription: preserves state/DOM
5tags: rendering, activity, visibility, state-preservation
6---
7 
8## Use Activity Component for Show/Hide
9 
10Use React's `<Activity>` to preserve state/DOM for expensive components that frequently toggle visibility.
11 
12**Usage:**
13 
14```tsx
15import { Activity } from 'react'
16 
17function Dropdown({ isOpen }: Props) {
18  return (
19    <Activity mode={isOpen ? 'visible' : 'hidden'}>
20      <ExpensiveMenu />
21    </Activity>
22  )
23}
24```
25 
26Avoids expensive re-renders and state loss.
27