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).
Don't wrap a plain JSX element in an unnecessary {} expression container
A JSX element used directly as a child doesn't need to be wrapped in curly braces — `{<Icon />}` and `<Icon />` render identically, but the braces add visual noise and can read as if a conditional/expression is intended.
Bad example
| 1 | <button> |
| 2 | {<ChevronIcon className={styles.chevron} />} |
| 3 | </button> |
Explanation (EN)
The curly braces are meaningless here — the element renders exactly the same without them, and their presence can mislead a reader into expecting a conditional or computed expression.
Objašnjenje (HR)
Vitičaste zagrade ovdje su besmislene — element se renderira potpuno isto bez njih, a njihova prisutnost može zavarati čitatelja da očekuje uvjetni ili izračunati izraz.
Good example
| 1 | <button> |
| 2 | <ChevronIcon className={styles.chevron} /> |
| 3 | </button> |
Explanation (EN)
Plain JSX children don't need an expression wrapper — this is both shorter and unambiguous.
Objašnjenje (HR)
Obična JSX djeca ne trebaju omotač izraza — ovo je i kraće i nedvosmisleno.