Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Prefer logical AND for single-branch JSX rendering
Use the logical AND operator (&&) instead of the ternary operator for conditional rendering when there is no fallback UI.
Bad example
| 1 | const SearchBar = ({ searchValue, onClear }: Props) => ( |
| 2 | <div className="search-container"> |
| 3 | <input value={searchValue} /> |
| 4 | {searchValue ? ( |
| 5 | <button onClick={onClear}>Clear</button> |
| 6 | ) : null} |
| 7 | </div> |
| 8 | ); |
Explanation (EN)
A one-branch render can use a boolean guard without introducing another visible fallback.
Objašnjenje (HR)
Jednu granu prikaza može čuvati boolean uvjet bez dodatnog vidljivog fallbacka.
Good example
| 1 | const SearchBar = ({ searchValue, onClear }: Props) => ( |
| 2 | <div className="search-container"> |
| 3 | <input value={searchValue} /> |
| 4 | {searchValue && ( |
| 5 | <button onClick={onClear}>Clear</button> |
| 6 | )} |
| 7 | </div> |
| 8 | ); |
Explanation (EN)
The logical AND (`&&`) operator provides a cleaner and more idiomatic syntax for single-branch conditionals in JSX. It makes the intent immediately clear.
Objašnjenje (HR)
Logički I (`&&`) operator pruža čišću i idiomatskiju sintaksu za uvjetno renderiranje s jednom granom u JSX-u. Namjera koda postaje odmah jasna.
Notes (EN)
Replace a JSX ternary with an empty false branch only when the left operand becomes a boolean or an intentionally empty string. Check the rendered zero case.
Bilješke (HR)
JSX ternarni izraz s praznom granom zamijeni s && samo kada je lijevi operand boolean ili namjerno prazan string. Provjeri prikaz nule.
Exceptions / Tradeoffs (EN)
Use a ternary when the falsy case must render UI or when values like 0 should still display. Never replace count ? child : null with count && child without handling zero. Preserve a ternary when its two branches communicate the state more clearly.
Iznimke / Tradeoffi (HR)
Ternarni izraz zadrži kada obje grane prikazuju UI ili nula treba biti vidljiva. Izraz count ? child : null ne zamjenjuj s count && child bez obrade nule. Ternarni izraz može biti jasniji i kada bolje opisuje dva stanja.