Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Scope listeners/observers to the relevant element, not the whole window
To detect that a user saw or interacted with a specific element, observe that element rather than wiring global window listeners.
Bad example
| 1 | // 'User saw the new row' inferred from any window activity anywhere |
| 2 | window.addEventListener('mousemove', dismiss); |
| 3 | window.addEventListener('scroll', dismiss); |
| 4 | window.addEventListener('keydown', dismiss); |
Explanation (EN)
Global listeners fire for activity unrelated to the element, so you can't actually tell the user noticed this specific row, and you pay listener cost for every interaction on the page.
Objašnjenje (HR)
Globalni slusaci se okidaju za aktivnost nevezanu uz element, pa zapravo ne znas je li korisnik primijetio bas taj redak, a placas trosak slusaca za svaku interakciju na stranici.
Good example
| 1 | const observer = new IntersectionObserver(([entry]) => { |
| 2 | if (entry.isIntersecting) onSeen(); |
| 3 | }, { threshold: 0.5 }); |
| 4 | observer.observe(rowRef.current); |
| 5 | // optional failsafe timeout so it still resolves if never scrolled into view |
Explanation (EN)
Observing the element itself gives a precise signal that this row was actually visible, and scopes the cost to the element you care about.
Objašnjenje (HR)
Promatranje samog elementa daje precizan signal da je bas taj redak stvarno bio vidljiv i ogranicava trosak na element koji te zanima.
Exceptions / Tradeoffs (EN)
A failsafe timeout is reasonable for the case where the element never enters the viewport / is never interacted with.
Iznimke / Tradeoffi (HR)
Sigurnosni timeout je razuman za slucaj kad element nikad ne ude u vidno polje ili korisnik s njim nikad ne stupi u interakciju.