Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Initialize state from a prop instead of syncing via useEffect
When state only needs the prop's initial value, pass it to useState directly rather than setting it in a mount-time useEffect.
Bad example
| 1 | const [isAnimating, setIsAnimating] = useState(false); |
| 2 | useEffect(() => { |
| 3 | if (isNew) setIsAnimating(true); |
| 4 | }, [isNew]); |
Explanation (EN)
Mirroring a prop into state via useEffect causes an extra render and an avoidable false->true flash on mount.
Objašnjenje (HR)
Preslikavanje propa u stanje preko useEffect-a uzrokuje dodatni render i izbjeziv bljesak false->true pri montiranju.
Good example
| 1 | const [isAnimating, setIsAnimating] = useState(isNew); |
Explanation (EN)
useState takes the initial value once, so the component starts in the correct state with no effect and no extra render.
Objašnjenje (HR)
useState uzima pocetnu vrijednost jednom, pa komponenta krece u ispravnom stanju bez efekta i bez dodatnog rendera.
Exceptions / Tradeoffs (EN)
If state must keep tracking later prop changes (controlled/derived from a changing prop), you need a different pattern; this applies when only the initial value matters.
Iznimke / Tradeoffi (HR)
Ako stanje mora i dalje pratiti kasnije promjene propa (kontrolirano/izvedeno iz mijenjajuceg propa), treba drugaciji obrazac; ovo vrijedi kad je bitna samo pocetna vrijednost.