When to extract a small UI component

Not every block of markup needs to become a component. Extraction is valuable when it gives a piece of the interface a clear responsibility.

Extract repeated structures

Repeated cards, navigation items, or metadata groups are strong candidates. A component keeps their structure consistent while allowing content to vary through props.

Extract independent behavior

A menu with its own interaction and accessibility requirements is easier to maintain when it has an explicit boundary.

Avoid premature abstraction

If two sections merely look similar today, they may not represent the same concept. Wait until the shared responsibility is clear before forcing them into one API.