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).
Flatten complex conditional rendering with variables
Avoid nested or chained ternary operators in JSX for multi-state rendering; assign content to a variable or use early returns.
Bad example
| 1 | const MyComponent = ({ status, data }) => { |
| 2 | return ( |
| 3 | <Layout> |
| 4 | {status === 'loading' ? ( |
| 5 | <Spinner /> |
| 6 | ) : status === 'error' ? ( |
| 7 | <Error /> |
| 8 | ) : data.length > 0 ? ( |
| 9 | <List data={data} /> |
| 10 | ) : ( |
| 11 | <Empty /> |
| 12 | )} |
| 13 | </Layout> |
| 14 | ); |
| 15 | }; |
Explanation (EN)
Nested ternaries inside JSX make the render logic difficult to scan, format, and debug. It forces the reader to parse multiple levels of indentation and conditions just to understand the visual hierarchy.
Objašnjenje (HR)
Ugniježđeni ternarni operatori unutar JSX-a otežavaju pregled, formatiranje i debugiranje koda. Prisiljavaju čitatelja da analizira više razina uvlačenja i uvjeta samo kako bi razumio vizualnu hijerarhiju.
Good example
| 1 | const MyComponent = ({ status, data }) => { |
| 2 | let content: React.ReactNode; |
| 3 |
|
| 4 | if (status === 'loading') { |
| 5 | content = <Spinner />; |
| 6 | } else if (status === 'error') { |
| 7 | content = <Error />; |
| 8 | } else if (data.length > 0) { |
| 9 | content = <List data={data} />; |
| 10 | } else { |
| 11 | content = <Empty />; |
| 12 | } |
| 13 |
|
| 14 | return <Layout>{content}</Layout>; |
| 15 | }; |
Explanation (EN)
Moving the logic into a typed variable using standard `if/else` blocks flattens the complexity. The JSX remains clean and purely declarative, while the logic is linear and easier to maintain.
Objašnjenje (HR)
Premještanje logike u tipiziranu varijablu korištenjem standardnih `if/else` blokova smanjuje kompleksnost. JSX ostaje čist i deklarativan, dok je logika linearna i lakša za održavanje.
Notes (EN)
Use this pattern when only a section of the UI changes (e.g., inside a layout). If the entire component changes, prefer 'Early Returns' instead.
Bilješke (HR)
Koristite ovaj uzorak kada se mijenja samo dio UI-a (npr. unutar layouta). Ako se mijenja cijela komponenta, radije koristite 'Early Returns'.