# `react-doctor/rerender-derived-state-from-hook`

Use a threshold/media-query hook (e.g. `useMediaQuery("(max-width: 767px)")`) — the component re-renders only when the threshold flips, not every pixel

- **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 continuous-value hook (useWindowWidth, useWindowHeight, useWindowDimensions, useScrollPosition / useScrollY / useScrollX, useMousePosition, useResizeObserver, useIntersectionObserver) whose returned binding is then ONLY used in a threshold binary comparison (x < 768, x >= 100) in a following statement. The component re-renders on every pixel.

## Fix prompt

Use this once validation confirms the diagnostic is real.

Swap to a threshold hook that re-renders only when the boundary flips: const isMobile = useMediaQuery('(max-width: 767px)'). For scroll thresholds, use an IntersectionObserver-based hook. Continuous-value hooks are correct only when the UI needs the live numeric value (e.g. drawing it on screen). See https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia