Rules Hub
Coding Rules Library
Use CSS for visual reordering instead of conditional JSX
Avoid duplicating JSX elements or using complex conditionals just to change visual order; use CSS flex-direction or order instead.
Bad example
| 1 | type Props = { label: string; iconLeft: boolean }; |
| 2 |
|
| 3 | export function SortButton({ label, iconLeft }: Props) { |
| 4 | return ( |
| 5 | <button className="flex items-center gap-2"> |
| 6 | {/* Bad: Duplicating the icon component based on position */} |
| 7 | {iconLeft && <SortIcon />} |
| 8 | <span>{label}</span> |
| 9 | {!iconLeft && <SortIcon />} |
| 10 | </button> |
| 11 | ); |
| 12 | } |
Explanation (EN)
Conditionally rendering the same component in different positions based on a flag creates unnecessary duplication and bloats the JSX. It mixes visual layout concerns with the component's structural logic.
Objašnjenje (HR)
Uvjetno renderiranje iste komponente na različitim pozicijama na temelju varijable stvara nepotrebnu duplikaciju i napuhuje JSX. Time se miješaju brige oko vizualnog rasporeda sa strukturnom logikom komponente.
Good example
| 1 | import clsx from 'clsx'; |
| 2 |
|
| 3 | type Props = { label: string; iconLeft: boolean }; |
| 4 |
|
| 5 | export function SortButton({ label, iconLeft }: Props) { |
| 6 | return ( |
| 7 | <button |
| 8 | className={clsx( |
| 9 | "flex items-center gap-2", |
| 10 | // Good: Using CSS to handle visual order |
| 11 | !iconLeft && "flex-row-reverse" |
| 12 | )} |
| 13 | > |
| 14 | <SortIcon /> |
| 15 | <span>{label}</span> |
| 16 | </button> |
| 17 | ); |
| 18 | } |
Explanation (EN)
Using CSS properties like `flex-direction: row-reverse` (or `order`) allows you to maintain a single, stable DOM structure while achieving the desired visual layout. This simplifies the JSX and leverages the browser's layout engine efficiently.
Objašnjenje (HR)
Korištenje CSS svojstava poput `flex-direction: row-reverse` (ili `order`) omogućuje održavanje jedinstvene, stabilne DOM strukture uz postizanje željenog vizualnog rasporeda. Ovo pojednostavljuje JSX i efikasno koristi sustav rasporeda preglednika.