---
title: "rerender transitions"
description: "Mark frequent, non-urgent state updates as transitions to maintain UI responsiveness."
type: skill
canonical_url: https://claudary.paisolsolutions.com/skills/rerender-transitions
source: "Claudary"
difficulty: intermediate
author: "Claude Code Knowledge Pack"
date: 2026-07-10T11:46:04.709Z
license: CC-BY-4.0
attribution: "rerender transitions — Claudary (https://claudary.paisolsolutions.com/skills/rerender-transitions)"
---

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

## Overview

---
title: Use Transitions for Non-Urgent Updates
impact: MEDIUM
impactDescription: maintains UI responsiveness
tags: 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):**

```tsx
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):**

```tsx
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)
  }, [])
}
```

---

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