Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Compute derived values outside useEffect
Use derived effect inputs only when their change frequency matches the intended external behavior.
Bad example
| 1 | function PageTracker() { |
| 2 | const location = useLocation(); |
| 3 |
|
| 4 | useEffect(() => { |
| 5 | // Logic inside effect; depends on entire object |
| 6 | const isProfile = location.pathname === '/profile'; |
| 7 | if (isProfile) { |
| 8 | analytics.track('View Profile'); |
| 9 | } |
| 10 | }, [location]); // Runs on every location object reference change |
| 11 | } |
Explanation (EN)
A broad location object triggers work for unrelated location changes.
Objašnjenje (HR)
Ovisnost o cijelom location objektu pokreće posao i za nepovezane promjene lokacije.
Good example
| 1 | function PageTracker() { |
| 2 | const location = useLocation(); |
| 3 | |
| 4 | // Calculate derived state during render |
| 5 | const isProfile = location.pathname === '/profile'; |
| 6 |
|
| 7 | useEffect(() => { |
| 8 | if (isProfile) { |
| 9 | analytics.track('View Profile'); |
| 10 | } |
| 11 | }, [isProfile]); // Runs ONLY when the boolean actually changes |
| 12 | } |
Explanation (EN)
The condition is calculated synchronously in the render scope. The effect now depends on a primitive boolean value, ensuring it only re-runs when the logical outcome actually changes.
Objašnjenje (HR)
Uvjet se izračunava sinkrono tijekom renderiranja. Efekt sada ovisi o primitivnoj boolean vrijednosti, osiguravajući da se ponovno pokreće samo kada se logički ishod stvarno promijeni.
Notes (EN)
Depend on a derived primitive when the external behavior should react only to changes in that primitive, rather than every change to its larger source.
Exceptions / Tradeoffs (EN)
Reducing a location to a boolean changes analytics frequency: repeated visits within the same category may still need tracking. Preserve event granularity and every remaining reactive input.