Component Size & Single Responsibility

Components should remain small, easy to read, and focused on a single purpose. Large components are harder to maintain, test, and extend. If a component starts growing too large, break it into smaller parts, use hooks, or move logic into helpers.

Patterns that make components grow large

1. Defining and using helper functions inside the component instead of placing them in the helpers directory.
2. Having a component do multiple things. Example: a MenuItem handling complex onClick logic, rendering UI, and showing modals.
3. Complex conditional logic using ternaries or nested if/else. Prefer breaking logic into child components, hooks, or subcomponents for readability and maintainability.
4. A component should focus on one clear purpose, not many unrelated responsibilities.

Clear structure when a component grows large

/ComponentName
    /components   // subcomponents
    /hooks        // custom hooks
    index.ts      // exports the main component

The main component should always be exported naturally from index.ts for consistent usage.

---