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).
Set a prop on the component that actually uses it
Don't thread a prop like id through to a child that ignores it when the wrapper around it is the one that needs it.
Bad example
| 1 | const Section: React.FC = () => ( |
| 2 | <Boundary> |
| 3 | <Widget id="section-widget" /> |
| 4 | </Boundary> |
| 5 | ); |
| 6 |
|
| 7 | // Widget never reads `id` -- it's actually Boundary that needs one to track |
| 8 | // hydration/error boundaries. |
| 9 | const Widget: React.FC<{ id: string }> = () => <div>...</div>; |
Explanation (EN)
The id prop is threaded onto Widget, which ignores it, instead of onto Boundary, the component that actually needs it. This is dead weight on Widget's API and hides the real purpose of the id.
Objašnjenje (HR)
Prop id se provlaci kroz Widget, koji ga ignorira, umjesto kroz Boundary, komponentu kojoj je zapravo potreban. To je mrtvi teret na API-ju Widgeta i skriva pravu svrhu tog id-a.
Good example
| 1 | const Section: React.FC = () => ( |
| 2 | <Boundary id="section-widget"> |
| 3 | <Widget /> |
| 4 | </Boundary> |
| 5 | ); |
| 6 |
|
| 7 | const Widget: React.FC = () => <div>...</div>; |
Explanation (EN)
The prop lives on the component that consumes it. Widget's API stays minimal and accurate, and the id's purpose (identifying the boundary) is clear from where it's declared.
Objašnjenje (HR)
Prop se nalazi na komponenti koja ga koristi. API Widgeta ostaje minimalan i tocan, a svrha id-a (identifikacija boundaryja) jasna je iz mjesta gdje je deklariran.