What you need to know
A component is useful when it has a distinct purpose, reusable behavior, or enough markup to be easier to understand separately. Splitting every span into a component adds navigation overhead.
How to apply it
Extract a section when it can be named clearly, accepts a focused set of props, or owns its own interaction. Keep small one-off markup close to the page that explains it.
Common mistake to avoid
Do not split solely to reduce line count. A useful component should make a change easier to locate and reason about.