rendering-activity

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

Guide BOOST

calcom@calcom

GitHub

From plugin

caldiy

49k95 skills95 agents

Install

$ npx -y skills add calcom/cal.diy --agent claude-code

How it fires

How this agent gets triggered: by you, by Claude, or both.

Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.

Context preview

The summary Claude sees to decide when to auto-load this agent.

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

Agent definition

rendering-activity.md

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:**

import { Activity } from 'react'

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

Avoids expensive re-renders and state loss.

Read it on GitHub ↗

Ships withcaldiy

Scheduling infrastructure for absolutely everyone.

Get the whole plugin

Stats

JavaScript Node React Next.js Bash

+7 tags

PostgreSQL Prisma Docker Vercel Git GitHub Playwright

48,662

Stars

15,219