react-doctor/no-long-transition-duration

Keep UI transitions under 1s — 100-150ms for instant feedback, 200-300ms for state changes, 300-500ms for layout changes. Use longer durations only for page-load hero animations

• Category: Performance
• Severity: warn
• Source: oxlint-plugin-react-doctor
• Framework: global
• Enabled when: always

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Confirm the longest duration parsed from transitionDuration, animationDuration, transition, or animation exceeds 1000ms. The rule splits comma-separated segments and uses the maximum. False positive: deliberate page-load hero, intro, parallax, or ambient loop animations that are intentionally long.

Fix prompt

Use this once validation confirms the diagnostic is real.

Trim UI feedback transitions to 100-300ms (200ms is a safe default); layout shifts can go to roughly 500ms. Long durations are only appropriate for one-shot hero or onboarding animations, never repeated micro-interactions like hovers. See https://www.nngroup.com/articles/response-times-3-important-limits/

Related rules

More Performance rules from the rules reference:

• react-doctor/no-permanent-will-change: Add will-change on animation start (`onMouseEnter`) and remove on end (`onAnimationEnd`). Permanent promotion wastes GPU memory and can degrade performance
• react-doctor/no-scale-from-zero: Use `initial={{ scale: 0.95, opacity: 0 }}` — elements should deflate like a balloon, not vanish into a point
• react-doctor/no-transition-all: List specific properties: `transition: "opacity 200ms, transform 200ms"` — or in Tailwind use `transition-colors`, `transition-opacity`, or `transition-transform`
• react-doctor/no-unstable-nested-components: Hoist nested components to module scope or memoize them — never define one inside another.
• react-doctor/no-usememo-simple-expression: Remove useMemo — property access, math, and ternaries are already cheap without memoization