Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Consolidate effects belonging to one synchronization concern
Merge multiple useEffect hooks that share the same dependency array and domain concern into a single hook to improve readability and maintainability.
Bad example
| 1 | useEffect(() => { |
| 2 | setHasError(false); |
| 3 | }, [imageUrl]); |
| 4 |
|
| 5 | useEffect(() => { |
| 6 | const img = imageRef.current; |
| 7 | if (img && img.complete && img.naturalWidth === 0) { |
| 8 | setHasError(true); |
| 9 | } |
| 10 | }, [imageUrl]); |
Explanation (EN)
Two effects implement successive steps of one image error-state update.
Objašnjenje (HR)
Dva effecta provode uzastopne korake istog ažuriranja stanja pogreške slike.
Good example
| 1 | useEffect(() => { |
| 2 | setHasError(false); |
| 3 |
|
| 4 | const img = imageRef.current; |
| 5 | if (img && img.complete && img.naturalWidth === 0) { |
| 6 | setHasError(true); |
| 7 | } |
| 8 | }, [imageUrl]); |
Explanation (EN)
The logic is consolidated into a single effect. This ensures that all side effects triggered by `imageUrl` changing are grouped together, improving readability and reducing the overhead of managing multiple hooks.
Objašnjenje (HR)
Logika je objedinjena u jedan efekt. To osigurava da su svi popratni efekti pokrenuti promjenom `imageUrl` grupirani zajedno, što poboljšava čitljivost i smanjuje opterećenje upravljanja višestrukim hookovima.
Notes (EN)
Combine effects when they implement one synchronization concern and merging preserves setup/cleanup order and every dependency.
Bilješke (HR)
Spoji effecte kada provode jednu sinkronizacijsku odgovornost i spajanje čuva redoslijed setupa i cleanupa te sve ovisnosti.
Exceptions / Tradeoffs (EN)
Identical dependency arrays alone do not justify merging unrelated resources. Derived render data may not need an effect at all.