Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Use empty dependencies only for effects without reactive inputs
Use empty effect dependencies only when no reactive input is read; preserve cleanup and remount behavior.
Bad example
| 1 | useEffect(() => { |
| 2 | document.addEventListener('click', onOutside); |
| 3 | return () => document.removeEventListener('click', onOutside); |
| 4 | }); // runs every render |
Explanation (EN)
Omitting the array repeats the subscription after every commit.
Objašnjenje (HR)
Good example
| 1 | useEffect(() => { |
| 2 | document.addEventListener("click", onOutside); |
| 3 | return () => document.removeEventListener("click", onOutside); |
| 4 | }, [onOutside]); |
Explanation (EN)
A reactive callback is tracked. If onOutside is a stable import rather than a prop or local function, an empty array is appropriate.
Objašnjenje (HR)
Notes (EN)
Use an empty array only for an effect with no reactive inputs; setup must tolerate cleanup and setup again during development and later remounts.
Exceptions / Tradeoffs (EN)
An empty array does not promise exactly one execution. A changing callback requires a dependency or a supported nonreactive event pattern.