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).
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)
Using a ternary operator with `null` as the fallback is unnecessarily verbose when you only need to render content for the truthy case. It adds visual noise without adding value.
Objašnjenje (HR)
Korištenje ternarnog operatora s `null` kao alternativom nepotrebno je opširno kada trebaš renderirati sadržaj samo za 'true' slučaj. To dodaje vizualni šum bez dodavanja vrijednosti.
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)
Be cautious with numeric values (e.g., `0`), as React renders them directly. When checking numbers, convert them to booleans (`!!count` or `count > 0`) before using `&&`.
Bilješke (HR)
Budi oprezan s numeričkim vrijednostima (npr. `0`) jer ih React izravno renderira. Kod provjere brojeva, pretvori ih u boolean (`!!count` ili `count > 0`) prije korištenja `&&`.
Exceptions / Tradeoffs (EN)
Use a ternary when the falsy case must render UI or when values like 0 should still display.
Iznimke / Tradeoffi (HR)
Koristi ternarni operator kad falsy grana mora renderirati UI ili kad se vrijednosti poput 0 ipak trebaju prikazati.