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).
Keep shared components context-agnostic; scope conditional behavior to the call site
Don't embed call-site-specific conditional rendering into a shared/default-export component; apply that condition where the component is used.
Bad example
| 1 | // LatestForumPosts.tsx — shared default export reused on many pages |
| 2 | export default function LatestForumPostsWrapper(props: Props) { |
| 3 | const isSidebarVideoVisible = useSidebarVideoVisibility('latest forum posts'); |
| 4 | if (isSidebarVideoVisible) return null; |
| 5 | return <LatestForumPosts {...props} />; |
| 6 | } |
| 7 | // Now EVERY page using this component hides the posts when a sidebar |
| 8 | // video exists — even article pages that have no sidebar video to replace. |
Explanation (EN)
Sidebar-specific logic is hardcoded into the shared default export, so it silently changes behavior on every other page that reuses the component, including ones where the condition makes no sense.
Objašnjenje (HR)
Logika specifična za sidebar je tvrdo kodirana u dijeljeni default export, pa tiho mijenja ponašanje na svakoj drugoj stranici koja ponovno koristi komponentu, uključujući one gdje uvjet nema smisla.
Good example
| 1 | // LatestForumPosts.tsx — stays context-agnostic |
| 2 | export default function LatestForumPosts(props: Props) { |
| 3 | return <LatestForumPostsList {...props} />; |
| 4 | } |
| 5 |
|
| 6 | // Sidebar.tsx — the condition lives at the call site that owns it |
| 7 | function Sidebar(props: Props) { |
| 8 | const isSidebarVideoVisible = useSidebarVideoVisibility('latest forum posts'); |
| 9 | if (isSidebarVideoVisible) return null; |
| 10 | return <LatestForumPosts {...props} />; |
| 11 | } |
Explanation (EN)
The shared component renders unconditionally; the sidebar-only rule lives in the sidebar. Other pages that reuse the component are unaffected.
Objašnjenje (HR)
Dijeljena komponenta renderira se bezuvjetno; pravilo koje vrijedi samo za sidebar živi u sidebaru. Druge stranice koje ponovno koriste komponentu ostaju netaknute.
Exceptions / Tradeoffs (EN)
If the conditional behavior genuinely applies to every consumer of the component, it can live inside it — but make that universality explicit and intentional.
Iznimke / Tradeoffi (HR)
Ako se uvjetno ponašanje doista odnosi na svakog korisnika komponente, može živjeti unutar nje — ali tu univerzalnost učini eksplicitnom i namjernom.