Rules Hub
Coding Rules Library
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP1stack specificStack: react
reactuseRefdombest-practice
Use a ref to access React-managed DOM nodes instead of querying the document
When an element is rendered and managed by React, reach it via useRef rather than document.querySelector so you target that exact node and stay within React's model.
PR: hegnar-web · org-mining-hist-2026-06Created: Jun 19, 2026
Bad example
Old codetsx
| 1 | useEffect(() => { |
| 2 | const node = document.querySelector('.skyscraper'); |
| 3 | node?.classList.add('active'); |
| 4 | }, []); |
Explanation (EN)
Objašnjenje (HR)
Good example
New codetsx
| 1 | const nodeRef = useRef<HTMLDivElement>(null); |
| 2 | useEffect(() => { |
| 3 | nodeRef.current?.classList.add('active'); |
| 4 | }, []); |
| 5 | return <div ref={nodeRef} className="skyscraper" />; |
Explanation (EN)
Objašnjenje (HR)