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).
Avoid needless wrapper helpers around a single inline element
Don't create a factory/helper to render one trivial element; inlining it removes indirection and avoids fighting the type system for no real DRY gain.
Bad example
| 1 | function createSvgIcon(id: string, props: JSX.IntrinsicElements['svg']) { |
| 2 | return ( |
| 3 | <svg {...props}> |
| 4 | <use href={`${sprite}#${id}`} /> |
| 5 | </svg> |
| 6 | ); |
| 7 | } |
| 8 |
|
| 9 | // usage |
| 10 | createSvgIcon('search', { width: '16', height: '16' }); |
Explanation (EN)
The helper wraps a two-line element behind a function call and a typed props signature. It adds an indirection layer (and, here, type friction) while saving almost no code, making each call site harder to read at a glance.
Objašnjenje (HR)
Pomoćna funkcija omata element od dvije linije iza poziva funkcije i tipiziranog potpisa propsa. Dodaje sloj indirekcije (i, ovdje, trenje s tipovima), a štedi gotovo nimalo koda, čineći svako mjesto poziva težim za brzo čitanje.
Good example
| 1 | // just inline the element where it's used |
| 2 | <svg width="16" height="16"> |
| 3 | <use href={`${sprite}#search`} /> |
| 4 | </svg> |
Explanation (EN)
The element is written directly at the usage site. It is immediately readable, has no custom API to learn, and avoids the type gymnastics that the wrapper required.
Objašnjenje (HR)
Element je napisan izravno na mjestu uporabe. Odmah je čitljiv, nema vlastiti API koji treba učiti i izbjegava gimnastiku s tipovima koju je omotač zahtijevao.
Notes (EN)
Reach for an abstraction once the inlined element carries real, repeated complexity (shared behaviour, many props, logic) — not merely because it appears more than once.
Bilješke (HR)
Posegni za apstrakcijom tek kad inlineani element nosi stvarnu, ponovljenu složenost (zajedničko ponašanje, mnogo propsa, logiku) — a ne samo zato što se pojavljuje više puta.
Exceptions / Tradeoffs (EN)
Balance against keep-ui-components-small: don't create a single-element wrapper just to shrink line count; split by meaningful unit instead. Balance against prefer-components-over-render-helper-functions: just inline the JSX when the helper renders one trivial element with no real logic.