New
Introducing React Bench, see how different models perform on React code

react-doctor/no-match-media-in-state-initializer

matchMedia in state initializer

  • Category: Bugs
  • Severity: warn
  • Source: oxlint-plugin-react-doctor
  • Framework: global
  • Enabled when: react, ssr
  • Default: Enabled

Validation prompt

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

Confirm the reported code matches matchMedia in state initializer. Check the framework context and diagnostic message before suppressing it.

Fix prompt

Use this once validation confirms the diagnostic is real.

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

More Bugs rules from the rules reference:

  • react-doctor/no-mirror-prop-effect: Delete both the `useState` and the `useEffect` and read the prop directly during render. Mirroring a prop into local state forces a stale first render before the effect re-syncs
  • react-doctor/no-mutable-in-deps: Read mutable values (`location.pathname`, `ref.current`) inside the effect body instead of in the deps array, or subscribe with `useSyncExternalStore`. Mutations to these don't trigger re-renders, so listing them in deps doesn't make the effect react to changes
  • react-doctor/no-mutating-reducer-state: Return a new reducer state object/array/collection instead of mutating the current state and returning the same top-level reference.
  • react-doctor/no-namespace: Drop the namespace and use a plain (Pascal-cased) component or DOM tag.
  • react-doctor/no-nested-component-definition: Move to a separate file or to module scope above the parent component