Rules Hub
Coding Rules Library
Encapsulate strictly coupled components
Wrap components that must always be used together into a single parent component to enforce consistency and prevent usage errors.
Bad example
| 1 | // Page.tsx |
| 2 | // The developer must remember to include the feature flag |
| 3 | // every time they use the ticker component. |
| 4 | export const Page = () => ( |
| 5 | <div> |
| 6 | <FeatureFlag id="enable-websocket" /> |
| 7 | <ClientOnly> |
| 8 | <LiveTicker /> |
| 9 | </ClientOnly> |
| 10 | </div> |
| 11 | ); |
Explanation (EN)
The dependency between the feature flag and the ticker component is implicit and exposed to the consumer. If a developer adds `LiveTicker` but forgets `FeatureFlag`, the functionality may break silently or behave unpredictably. This violates the DRY principle.
Objašnjenje (HR)
Ovisnost između feature flaga i komponente tickera je implicitna i izložena onome tko je koristi. Ako programer doda `LiveTicker`, ali zaboravi `FeatureFlag`, funkcionalnost se može prekinuti ili ponašati nepredvidivo. Ovo krši DRY princip.
Good example
| 1 | // LiveTickerFeature.tsx |
| 2 | // The coupling is encapsulated in a single component. |
| 3 | export const LiveTickerFeature = () => ( |
| 4 | <> |
| 5 | <FeatureFlag id="enable-websocket" /> |
| 6 | <ClientOnly> |
| 7 | <LiveTicker /> |
| 8 | </ClientOnly> |
| 9 | </> |
| 10 | ); |
| 11 |
|
| 12 | // Page.tsx |
| 13 | export const Page = () => ( |
| 14 | <div> |
| 15 | <LiveTickerFeature /> |
| 16 | </div> |
| 17 | ); |
Explanation (EN)
The strict relationship is encapsulated within a dedicated wrapper component. This ensures that the component always renders with its required configuration or dependencies, reducing the API surface area and preventing integration errors.
Objašnjenje (HR)
Stroga veza je enkapsulirana unutar posebne omotač (wrapper) komponente. To osigurava da se komponenta uvijek renderira sa svojom potrebnom konfiguracijom ili ovisnostima, smanjujući površinu API-ja i sprječavajući greške pri integraciji.