Will It Vibe?Direct DOM query inside a React component
Part of Code Quality & Syntax, which counts for 20% of the overall score. When this check fires it deducts 4 points from that category, once per scan, no matter how many places it turns up.
What it detects
Reaching for document.querySelector inside a component bypasses React virtual DOM: it reads stale nodes, breaks under concurrent rendering and Strict Mode double-invocation, and fails in server rendering. Use a ref instead. Heuristic: some integration code legitimately needs the DOM.
Why it matters
Calling document.querySelector inside a component steps outside React and reads the DOM directly. It can see stale nodes between renders, runs into trouble under concurrent rendering and Strict Mode double-invocation, and fails during server rendering where document does not exist. This is a heuristic: some third-party integrations legitimately need direct DOM access.
How to fix it
Use a ref to reference the specific element instead of querying the document. Attach ref to the JSX element and read ref.current in an effect or handler. If you must integrate with a library that needs a real node, scope the access to a ref you own and guard it for server rendering.
The paid report includes a ready-to-paste prompt for your AI coding agent for every check it finds, pointed at the exact findings from your scan. See pricing
Does your repo trip this check?
Paste a GitHub URL or drop a project folder. Scans run in your browser and take seconds.
Scan your repo