Skip to content
Sarj Sarj Sarj Standards

React Doctor

492 rules react-doctor@0.9.14

Complete effective rule inventory.

Docs

Rules

40 rules on this page · 492 total

  • react-doctor/no-loading-flag-reset-outside-finally

    A trailing setLoading(false) after an await never runs if the awaited call rejects, so the flag stays stuck truthy; reset it in a finally block (or mirror the reset on every catch) so it clears on both paths.

    : warning in React projects
    No autofix
  • react-doctor/no-locale-format-in-render

    Format locale/timezone-dependent values in a post-mount useEffect + state, or pass an explicit locale and timeZone so the server and the browser render the same text. Only runs on SSR-capable projects.

    : warning in React projects
    No autofix
  • react-doctor/no-match-media-in-state-initializer

    Prefer CSS media queries for layout, or subscribe with useSyncExternalStore and provide a stable server snapshot.

    : warning in React projects
    No autofix
  • react-doctor/no-mixed-srcset-descriptors

    Use either width descriptors with sizes or density descriptors throughout one srcSet, never both.

    : warning in React projects
    No autofix
  • react-doctor/no-multiple-main-landmarks

    Keep one visible main landmark per rendered view so assistive-technology users can jump to the primary content unambiguously.

    : warning in React projects
    No autofix
  • react-doctor/no-multiple-unlabeled-navigation-landmarks

    Give each coexisting navigation landmark a concise, unique aria-label or aria-labelledby value.

    : warning in React projects
    No autofix
  • react-doctor/no-mutable-in-deps

    Read mutable values like location.pathname or ref.current inside the effect body, or subscribe with useSyncExternalStore. Changing them doesn't redraw the screen, so listing them in deps won't make the effect run again.

    : error in React projects
    No autofix
  • react-doctor/no-mutate-queried-dom-node-in-component

    Drive the node with state/props (or a ref for genuinely uncontrolled nodes) instead of querying it and mutating its style/class. Imperative edits to a node React renders are invisible to the virtual DOM and get reverted or clobbered on the next render.

    : warning in React projects
    No autofix
  • react-doctor/no-mutating-array-method-on-prop-or-hook-result

    sort, reverse, and splice mutate in place, so calling them on a prop or hook result corrupts shared state. Use the immutable toSorted/toReversed/toSpliced, or copy the array first ([...array].sort()) when targeting pre-ES2023 runtimes.

    : warning in React projects
    No autofix
  • react-doctor/no-mutating-reducer-state

    Return a new state object from the reducer instead of changing the old one and returning it. React only notices the change when the object is new.

    : error in React projects
    No autofix
  • react-doctor/no-namespace

    Use a plain component or DOM tag because React cannot render JSX namespaced names like ns:Foo.

    : warning in React projects
    No autofix
  • react-doctor/no-non-literal-selector-query-without-try-catch

    querySelector/querySelectorAll/matches/closest throw a DOMException on an invalid CSS selector, and href/hash fragments are frequently invalid. Wrap the call in try/catch or normalize the value with CSS.escape.

    : warning in React projects
    No autofix
  • react-doctor/no-non-null-assertion-on-maybe-undefined-result

    Drop the ! on .find/.match/.get results and handle the miss (optional chaining, a guard, or a fallback). These built-ins return undefined/null when nothing matches, so the assertion just moves the crash one line later.

    : warning in React projects
    No autofix
  • react-doctor/no-nondeterministic-id-value-in-render-body

    An id generator (uniqueId/nanoid/crypto.randomUUID/shortid) bound in the render body re-runs every render, so the id is unstable and breaks htmlFor/aria/SVG references and SSR hydration. Use useId for reference ids, or a useRef/useState initializer to mint it once.

    : warning in React projects
    No autofix
  • react-doctor/no-noninteractive-element-interactions

    Put interactions on a button or link, or add an interactive role.

    : warning in React projects
    No autofix
  • react-doctor/no-noninteractive-element-to-interactive-role

    Use a real interactive element instead of adding an interactive role to a static one.

    : warning in React projects
    No autofix
  • react-doctor/no-noninteractive-tabindex

    Only add tabIndex to interactive elements or interactive roles.

    : warning in React projects
    No autofix
  • react-doctor/no-nullish-coalescing-arithmetic-precedence

    Arithmetic binds tighter than ??, so wrap the nullish part in parentheses ((x ?? 0) / y) to compute the value you actually intend.

    : warning in React projects
    No autofix
  • react-doctor/no-object-or-array-coerced-to-string-in-template-literal

    Interpolating an object or structurally nested array can produce [object Object] or lose structure; read a specific value or use .join/JSON.stringify.

    : warning in React projects
    No autofix
  • react-doctor/no-predicate-function-reference-in-boolean-position

    A bare is*/has*/can*/should*/will* function reference is always truthy in a condition, so the guarded branch never behaves as intended. Call the function (isReady()) to evaluate the predicate.

    : warning in React projects
    No autofix
  • react-doctor/no-prop-callback-in-render

    Invoke the callback from the event or asynchronous operation that produced the value, or from an effect when synchronizing with an external system. Render must stay pure because React can replay or discard it.

    : error in React projects
    No autofix
  • react-doctor/no-random-key

    Use a stable id from the item itself, like item.id, a content hash, or the index when the order never changes. Don't build the key from something that changes every time.

    : error in React projects
    No autofix
  • react-doctor/no-redundant-roles

    Remove redundant role attributes so assistive tech reads the element's native semantics without extra noise.

    : warning in React projects
    No autofix
  • react-doctor/no-redundant-should-component-update

    Drop shouldComponentUpdate (PureComponent already shallow-compares) or extend React.Component if custom logic is needed.

    : warning in React projects
    No autofix
  • react-doctor/no-ref-callback-cleanup-before-react-19

    React 18 ignores functions returned from ref callbacks. Handle cleanup when React calls the ref with null, or require React 19 before returning a cleanup function.

    : warning in React projects
    No autofix
  • react-doctor/no-ref-current-in-render

    Move ref writes into an event handler or effect. Render must stay pure because React can replay or discard it. The predictable null-guarded lazy initialization pattern remains supported.

    : error in React projects
    No autofix
  • react-doctor/no-render-return-value

    Don't use ReactDOM.render's return value. It's legacy and was removed in React 19.

    : warning in React projects
    No autofix
  • react-doctor/no-responsive-hidden-accessible-name

    Keep an accessible name available at every breakpoint, such as persistent sr-only text or an aria-label on the control.

    : warning in React projects
    No autofix
  • react-doctor/no-secrets-in-client-code

    Move secrets to server-only code. Anything in client env variables gets shipped to the browser, so it can't hold secrets.

    : warning in React projects
    No autofix
  • react-doctor/no-set-state-after-await-in-effect

    In a useEffect whose dependencies can change, guard any setter call that runs after an await behind a cancellation/ignore flag, or return a cleanup that cancels the async work.

    : warning in React projects
    No autofix
  • react-doctor/no-set-state-in-render

    Move the setter into a useEffect or an event handler, or compute the value while rendering. Calling a setter during render starts another render that calls it again, looping forever.

    : warning in React projects
    No autofix
  • react-doctor/no-side-effect-in-state-updater-function

    React may replay a state updater, so callbacks, analytics, and persistence inside it can run more than once. Compute state purely, then perform the side effect outside the setter.

    : warning in React projects
    No autofix
  • react-doctor/no-srcset-without-sizes

    Add a sizes attribute that describes the image's rendered width at each responsive breakpoint.

    : warning in React projects
    No autofix
  • react-doctor/no-stale-timer-ref

    Reset the ref right after clearing (clearTimeout(ref.current); ref.current = null) so truthiness checks on the ref keep meaning “timer still pending”.

    : warning in React projects
    No autofix
  • react-doctor/no-static-element-interactions

    Give clickable static elements a role, or use a button or link.

    : warning in React projects
    No autofix
  • react-doctor/no-static-motion-config-never

    Use reducedMotion="user", or derive the value from an explicit user preference instead of permanently disabling reduced-motion support.

    : warning in React projects
    No autofix
  • react-doctor/no-string-false-on-boolean-attribute

    Use the boolean form on boolean attributes: disabled / disabled={true} / disabled={false}, not disabled="false". A non-empty string is truthy, so ="false" actually turns the attribute ON.

    : warning in React projects
    No autofix
  • react-doctor/no-string-refs

    Use a callback ref or useRef so ref ownership is explicit and not tied to legacy string lookup.

    : warning in React projects
    No autofix
  • react-doctor/no-sync-xhr

    Never open an XMLHttpRequest synchronously (async = false). It blocks the main thread. Use fetch() or pass true and handle the response asynchronously.

    : warning in React projects
    No autofix
  • react-doctor/no-this-in-sfc

    Read from the props argument because function components do not have a React instance this.

    : warning in React projects
    No autofix