---
title: "rendering activity"
description: "Use React's `<Activity>` to preserve state/DOM for expensive components that frequently toggle visibility."
type: skill
canonical_url: https://claudary.paisolsolutions.com/skills/rendering-activity
source: "Claudary"
difficulty: intermediate
author: "Claude Code Knowledge Pack"
date: 2026-07-10T11:37:36.455Z
license: CC-BY-4.0
attribution: "rendering activity — Claudary (https://claudary.paisolsolutions.com/skills/rendering-activity)"
---

# rendering activity
Use React's `<Activity>` to preserve state/DOM for expensive components that frequently toggle visibility.

## Overview

---
title: Use Activity Component for Show/Hide
impact: MEDIUM
impactDescription: preserves state/DOM
tags: rendering, activity, visibility, state-preservation
---

## Use Activity Component for Show/Hide

Use React's `<Activity>` to preserve state/DOM for expensive components that frequently toggle visibility.

**Usage:**

```tsx
import { Activity } from 'react'

function Dropdown({ isOpen }: Props) {
  return (
    <Activity mode={isOpen ? 'visible' : 'hidden'}>
      <ExpensiveMenu />
    </Activity>
  )
}
```

Avoids expensive re-renders and state loss.

---

Source: [Claudary](https://claudary.paisolsolutions.com/skills/rendering-activity) · https://claudary.paisolsolutions.com