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).
Colocate state to reduce re-render blast radius
Keep state close to where it's used to avoid rerendering large trees unnecessarily.
Bad example
| 1 | import { useState } from "react"; |
| 2 |
|
| 3 | export function PageLayout() { |
| 4 | const [isOpen, setIsOpen] = useState(false); |
| 5 |
|
| 6 | // Layout state here causes the whole page to rerender for a small toggle. |
| 7 | return ( |
| 8 | <div> |
| 9 | <Header onToggle={() => setIsOpen((v) => !v)} /> |
| 10 | <Sidebar open={isOpen} /> |
| 11 | <MainContent /> |
| 12 | <Footer /> |
| 13 | </div> |
| 14 | ); |
| 15 | } |
| 16 |
|
| 17 | function Header({ onToggle }: { onToggle: () => void }) { |
| 18 | return <button onClick={onToggle}>Toggle sidebar</button>; |
| 19 | } |
| 20 |
|
| 21 | function Sidebar({ open }: { open: boolean }) { |
| 22 | return <aside>{open ? "Open" : "Closed"}</aside>; |
| 23 | } |
| 24 |
|
| 25 | function MainContent() { |
| 26 | return <div>Big tree...</div>; |
| 27 | } |
| 28 |
|
| 29 | function Footer() { |
| 30 | return <footer>Footer</footer>; |
| 31 | } |
Explanation (EN)
A small UI toggle causes the entire layout (including heavy main content) to re-render. This increases work and can hurt performance as the app grows.
Objašnjenje (HR)
Mali UI toggle uzrokuje rerender cijelog layouta (ukljucujuci tezak main content). To povecava rad i moze pogorsati performanse kako app raste.
Good example
| 1 | import { useState } from "react"; |
| 2 |
|
| 3 | export function PageLayout() { |
| 4 | return ( |
| 5 | <div> |
| 6 | <SidebarShell /> |
| 7 | <MainContent /> |
| 8 | <Footer /> |
| 9 | </div> |
| 10 | ); |
| 11 | } |
| 12 |
|
| 13 | function SidebarShell() { |
| 14 | const [isOpen, setIsOpen] = useState(false); |
| 15 |
|
| 16 | return ( |
| 17 | <div> |
| 18 | <button onClick={() => setIsOpen((v) => !v)}>Toggle sidebar</button> |
| 19 | <aside>{isOpen ? "Open" : "Closed"}</aside> |
| 20 | </div> |
| 21 | ); |
| 22 | } |
| 23 |
|
| 24 | function MainContent() { |
| 25 | return <div>Big tree...</div>; |
| 26 | } |
| 27 |
|
| 28 | function Footer() { |
| 29 | return <footer>Footer</footer>; |
| 30 | } |
Explanation (EN)
State is colocated in the smallest subtree that needs it. Toggling the sidebar doesn't force the entire page layout to re-render.
Objašnjenje (HR)
State je colocated u najmanjem podstablu kojem treba. Toggle sidebar-a ne tjera cijeli layout stranice na rerender.
Notes (EN)
If state must be shared across distant components, prefer splitting providers, selectors, or composition to keep updates localized.
Bilješke (HR)
Ako state mora biti dijeljen izmedu udaljenih komponenti, preferiraj split providere, selektore ili kompoziciju kako bi updateovi ostali lokalni.
Exceptions / Tradeoffs (EN)
If the main content must react to the state change (e.g., layout shift, resize), lifting state is valid. Still isolate heavy children where possible.
Iznimke / Tradeoffi (HR)
Ako main content mora reagirati na promjenu statea (npr. layout shift, resize), dizanje statea je validno. I dalje izoliraj tesku djecu gdje je moguce.