react-doctor/no-transition-all

List specific properties: `transition: "opacity 200ms, transform 200ms"` — or in Tailwind use `transition-colors`, `transition-opacity`, or `transition-transform`

• 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 a style={{ transition: 'all ...' }} where the value is a string literal starting with 'all'. The check is literal-prefix only — template literals, variables, and Tailwind class names are not inspected. transition: 'all' animates every changed CSS property, including ones that re-trigger layout and paint.

Fix prompt

Use this once validation confirms the diagnostic is real.

List the properties you actually animate: transition: 'opacity 200ms, transform 200ms'. In Tailwind use transition-colors, transition-opacity, or transition-transform rather than the broad transition-all. See https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property

Related rules

More Performance rules from the rules reference:

• 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
• react-doctor/prefer-stable-empty-fallback: Hoist a module-level const EMPTY = [] (or {}) and use it as the || / ?? fallback so the memoised child sees a stable reference
• react-doctor/redux-useselector-inline-derivation: Select the raw slice in useSelector and derive with useMemo, or hoist into a memoised createSelector from reselect.
• react-doctor/redux-useselector-returns-new-collection: useSelector that returns a fresh object/array literal re-renders on every action; return a primitive, split into multiple useSelector calls, or pass shallowEqual.