Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Choose the correct lifecycle owner for browser work
Place browser initialization at its correct lifecycle boundary; non-DOM side effects do not automatically belong in render.
Bad example
| 1 | export default function useRegisterElements(tags: string[]) { |
| 2 | useEffect(() => { |
| 3 | for (const tag of tags) { |
| 4 | void defineCustomElement(tag); |
| 5 | } |
| 6 | }, [tags]); |
| 7 | } |
Explanation (EN)
An effect can unnecessarily delay application-wide registration when a safe browser bootstrap already owns that work.
Objašnjenje (HR)
Effect može nepotrebno odgoditi registraciju na razini aplikacije kada je već sigurno obavlja browser bootstrap.
Good example
| 1 | async function registerElements() { |
| 2 | for (const tag of tagsForThisRoute) await defineCustomElement(tag); |
| 3 | } |
| 4 | if (typeof window !== "undefined") { |
| 5 | void registerElements().catch(reportRegistrationError); |
| 6 | } |
Explanation (EN)
Application-wide registration may run in a browser bootstrap if repeat registration is handled and failure is reported.
Objašnjenje (HR)
Registracija na razini aplikacije može ići u browser bootstrap ako obrađuje ponovnu registraciju i prijavljuje kvar.
Notes (EN)
Choose the lifecycle owner of browser work. Pure calculation can run during render; external synchronization belongs in an effect, event handler or deliberate application bootstrap.
Bilješke (HR)
Odredi vlasnika životnog ciklusa browser posla. Čisti izračun može ići u render; sinkronizacija vanjskog sustava pripada effectu, event handleru ili namjernoj inicijalizaciji aplikacije.
Exceptions / Tradeoffs (EN)
Never move side effects into render just because they do not access DOM. Module initialization must be SSR-safe, idempotent where required and handle failures.