Files
antigravity-skills-reference/skills/react-best-practices/rules/rerender-transitions.md
sck_0 c86c93582e feat: integrate official Anthropic and Vercel Labs skills
- Add 8 new skills (62 total, up from 58)
- Official Anthropic skills: docx, pdf, pptx, xlsx, brand-guidelines, internal-comms
- Vercel Labs skills: react-best-practices, web-design-guidelines
- Implement dual-versioning: -official/-anthropic and -community suffixes
- Update README with new skill registry and credits
- Regenerate skills_index.json (62 skills validated)
- Add comprehensive walkthrough.md

BREAKING CHANGE: Document skills (docx/pdf/pptx/xlsx) renamed with version suffixes
2026-01-15 07:49:19 +01:00

1.0 KiB

title, impact, impactDescription, tags
title impact impactDescription tags
Use Transitions for Non-Urgent Updates MEDIUM maintains UI responsiveness rerender, transitions, startTransition, performance

Use Transitions for Non-Urgent Updates

Mark frequent, non-urgent state updates as transitions to maintain UI responsiveness.

Incorrect (blocks UI on every scroll):

function ScrollTracker() {
  const [scrollY, setScrollY] = useState(0)
  useEffect(() => {
    const handler = () => setScrollY(window.scrollY)
    window.addEventListener('scroll', handler, { passive: true })
    return () => window.removeEventListener('scroll', handler)
  }, [])
}

Correct (non-blocking updates):

import { startTransition } from 'react'

function ScrollTracker() {
  const [scrollY, setScrollY] = useState(0)
  useEffect(() => {
    const handler = () => {
      startTransition(() => setScrollY(window.scrollY))
    }
    window.addEventListener('scroll', handler, { passive: true })
    return () => window.removeEventListener('scroll', handler)
  }, [])
}