Rules Hub
Coding Rules Library
← Back to all rules
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
frontend ruleP1universalStack: react
reactdryjsxduplication
Extract only the differing JSX, don't duplicate the whole block
When two branches render almost identical markup, branch only on the small differing part instead of duplicating the entire element tree.
PR: frontpage-web · org-mining-hist-2026-06Created: Jun 18, 2026
Bad example
Old codetsx
| 1 | if (isSpecial) { |
| 2 | return (<a className={style.item} href={url}><Image/><div className={style.textBox}>{specialContent}</div></a>); |
| 3 | } |
| 4 | return (<a className={style.item} href={url}><Image/><div className={style.textBox}>{normalContent}</div></a>); |
Explanation (EN)
Objašnjenje (HR)
Good example
New codetsx
| 1 | return ( |
| 2 | <a className={style.item} href={url}> |
| 3 | <Image/> |
| 4 | <div className={style.textBox}>{isSpecial ? specialContent : normalContent}</div> |
| 5 | </a> |
| 6 | ); |
Explanation (EN)
Objašnjenje (HR)