---
description: Keep each React component on one job and split large files.
globs: "**/*.{tsx,jsx}"
alwaysApply: false
---

# Small components

- A component renders one idea. Data loading, formatting, and the screen it sits in are separate.
- When a file is hard to name, it has two jobs. Split it.
- Prefer a new component over a longer conditional block.
- Share business rules from a module the web app and any mobile app can both import. Keep the screen itself on its platform.