Rules Hub
Coding Rules Library
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP1universalStack: react
reacteventsperformancearchitecture
Use event delegation instead of attaching duplicate listeners on the same element
Listen once in a common parent and pass derived data down as props rather than registering N identical listeners on the same element.
PR: hegnar-web · org-mining-hist-2026-06Created: Jun 19, 2026
Bad example
Old codetypescript
| 1 | // each of three sibling components runs this hook separately |
| 2 | function useCountryFromEvent() { |
| 3 | useEffect(() => { |
| 4 | el.addEventListener('change', handler); |
| 5 | return () => el.removeEventListener('change', handler); |
| 6 | }, []); |
| 7 | } |
Explanation (EN)
Objašnjenje (HR)
Good example
New codetypescript
| 1 | // parent listens once and passes country down |
| 2 | function ReportsWidget() { |
| 3 | const [country, setCountry] = useState('NO'); |
| 4 | useEffect(() => { |
| 5 | const handler = (e) => setCountry(e.detail); |
| 6 | el.addEventListener('change', handler); |
| 7 | return () => el.removeEventListener('change', handler); |
| 8 | }, []); |
| 9 | return <><EarningCalls country={country} /><Presentations country={country} /></>; |
| 10 | } |
Explanation (EN)
Objašnjenje (HR)