Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Restructure effects before removing dependencies
Simplify effect dependencies by restructuring the values the effect reads; do not omit a captured value merely because it is derived.
Bad example
| 1 | const sourceString = formatSource(selectedTab); |
| 2 | useEffect(() => subscribe(sourceString), [selectedTab]); |
Explanation (EN)
Deleting a captured dependency without restructuring can preserve a stale closure.
Objašnjenje (HR)
Good example
| 1 | useEffect(() => { |
| 2 | const sourceString = formatSource(selectedTab); |
| 3 | return subscribe(sourceString); |
| 4 | }, [selectedTab]); |
Explanation (EN)
This assumes formatSource and subscribe are stable imported functions; the effect reads only selectedTab from component scope.
Objašnjenje (HR)
Notes (EN)
Remove a dependency only after changing the effect so it no longer reads that reactive value, or proving the value is stable under the hooks rules.
Exceptions / Tradeoffs (EN)
A derived value read inside the effect is still a dependency. Derive it inside the effect from listed inputs or depend only on the derived result when that is the intended trigger.