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 ruleP1universalStack: react
reactstaterefshydration
Use state, not a ref, when the value change must trigger a re-render
A value that should swap the rendered UI on change must live in state; a ref mutation does not re-render and can leave the UI stuck.
PR: hegnar-components · org-mining-deep-2026-06Created: Jun 17, 2026
Bad example
Old codetsx
| 1 | const mounted = useRef(false); |
| 2 | useEffect(() => { mounted.current = true; }, []); // no re-render |
| 3 | return mounted.current ? <Time /> : <Skeleton />; // stuck on skeleton |
Explanation (EN)
Objašnjenje (HR)
Good example
New codetsx
| 1 | const [mounted, setMounted] = useState(false); |
| 2 | useEffect(() => setMounted(true), []); |
| 3 | return mounted ? <Time /> : <Skeleton />; |
Explanation (EN)
Objašnjenje (HR)