Key takeaway: A component is a contract between its author and its users, and the props are the interface of that contract — designing the props deliberately, with clear responsibilities and sensible defaults, is what makes a component reusable, predictable, and maintainable.
The Component as a Contract
A component is not just a piece of UI — it is a contract that promises certain behaviour in exchange for certain inputs. The props are the interface of that contract: they define what the component needs, what it accepts, and what it will do with it. A well-designed component has a clear, minimal interface that is easy to understand and use, while a poorly designed one has a confusing, sprawling interface that is hard to use correctly.
The quality of this contract determines how reusable the component is. A component with a clear, minimal interface can be used in many places without confusion, while a component with a confusing interface — props that overlap, unclear responsibilities, surprising behaviour — is hard to use correctly and gets reimplemented or worked around.
Designing the Interface Deliberately
| Design decision | What it affects |
|---|---|
| Minimal props | How easy the component is to use |
| Clear responsibilities | Whether the component does one thing well |
| Sensible defaults | Whether common uses are simple |
| Predictable behaviour | Whether users can reason about the component |
The most important decision is keeping the props minimal — a component should accept only what it genuinely needs, with sensible defaults for the rest, so that the common case is simple and the interface is easy to understand. Props that are redundant, overlapping, or rarely used add confusion without adding value.
Clear Responsibilities
A component should have a clear, single responsibility — it should do one thing well, and its props should reflect that. A component that tries to do too much — handling many unrelated concerns, with props for each — is hard to use, hard to test, and hard to maintain, because its behaviour is complex and its interface is sprawling.
The principle of clear responsibilities applies to the interface as well as the implementation — the props should be coherent and focused, so that a user can understand what the component does and how to use it from its interface alone.
Predictable Behaviour
A component’s behaviour should be predictable — given the same props, it should behave the same way, and its behaviour should follow from its interface without surprises. This is what makes a component trustworthy and reusable, because users can reason about what it will do without reading its implementation.
The Bottom Line
Design components as contracts with deliberate interfaces, since the props are the interface of that contract and determine how reusable and maintainable the component is. Keep props minimal with sensible defaults, give the component a clear single responsibility reflected in its interface, and make its behaviour predictable from its interface, so that users can reason about it without reading its implementation.
