Files
infinite-canvas/.agents/skills/vercel-react-best-practices/rules/rendering-activity.md
T
HouYunFei fb79a15508 docs(vercel-react-best-practices): 添加 Vercel React 最佳实践规则文档
- 添加 sections 定义文件,包含性能优化各领域分类
- 添加规则模板文件,规范文档结构和标签定义
- 添加异步操作优化规则,包括防止瀑布流、并行化、延迟等待等
- 添加包大小优化规则,包括避免桶式导入、动态导入、预加载等
- 添加服务端性能优化规则,包括 API 路
2026-05-21 15:22:11 +08:00

564 B

title, impact, impactDescription, tags
title impact impactDescription tags
Use Activity Component for Show/Hide MEDIUM preserves state/DOM 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.