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).
Put the lazy-load boundary at the consuming call site, not inside a shared component
Define React.lazy/dynamic-import boundaries where a component is actually consumed, not inside a component that is also imported directly elsewhere.
Bad example
| 1 | // SharedDialog.tsx — imported directly by several entry points |
| 2 | const DialogContent = lazy(() => import('./DialogContent')); |
| 3 |
|
| 4 | export default function SharedDialog() { |
| 5 | return ( |
| 6 | <Suspense fallback={<Spinner />}> |
| 7 | <DialogContent /> |
| 8 | </Suspense> |
| 9 | ); |
| 10 | } |
Explanation (EN)
Because SharedDialog is imported directly in multiple places, baking the lazy boundary inside it forces a chunk split for every consumer, even those that always need the content immediately. The split no longer reflects where laziness is actually wanted.
Objašnjenje (HR)
Buduci da se SharedDialog izravno uvozi na vise mjesta, ugradnja lazy granice unutar njega prisiljava podjelu u zaseban chunk za svakog potrosaca, cak i one kojima sadrzaj uvijek treba odmah. Podjela vise ne odrazava gdje je lijenost zaista potrebna.
Good example
| 1 | // DialogContent stays a normal component. |
| 2 | // Each consumer that wants it lazy declares its own boundary: |
| 3 |
|
| 4 | // MobileHeader.tsx |
| 5 | const Dialog = lazy(() => import('./SharedDialog')); |
| 6 |
|
| 7 | // DesktopHeader.tsx |
| 8 | const Dialog = lazy(() => import('./SharedDialog')); |
| 9 |
|
| 10 | function Header() { |
| 11 | return open ? ( |
| 12 | <Suspense fallback={<Spinner />}> |
| 13 | <Dialog /> |
| 14 | </Suspense> |
| 15 | ) : null; |
| 16 | } |
Explanation (EN)
The lazy boundary lives at the call sites that actually benefit from deferring the load. Consumers that need the component eagerly can import it normally, and the chunk split matches real usage.
Objašnjenje (HR)
Lazy granica zivi na pozivnim mjestima koja zaista imaju koristi od odgadanja ucitavanja. Potrosaci kojima komponenta treba odmah mogu je uvesti normalno, a podjela chunka odgovara stvarnoj upotrebi.
Notes (EN)
If many call sites need the same lazy boundary, you can still centralize it in a thin dedicated wrapper module that exists only for that purpose, rather than overloading the component itself.
Bilješke (HR)
Ako mnoga pozivna mjesta trebaju istu lazy granicu, mozes je i dalje centralizirati u tankom namjenskom wrapper modulu koji postoji samo za tu svrhu, umjesto da preopteretis samu komponentu.