react-component-convention

Structure React components by enforcing a predictable file layout: group imports first, define props and types next, and export the functional component last. This fixed in-file ordering reduces cognitive load when reading component files.

The one-component-per-file rule mandates that each React file exports only a single functional component. This convention prevents bloated files, promotes clean separation of concerns, and makes component decomposition easier during code reviews.

Order React file contents by placing imports at the top, followed by props and type definitions, and concluding with the functional component export. Explicit documentation for render props and small inline components should follow this structure.

Yes, these React component conventions are designed for TypeScript frontend projects. They standardize component structure by defining explicit props and type definitions before the functional component export to ensure consistency.

The best way to review React component structure is to check for the prescribed file order, verify one component per file, and assess whether large components are decomposed. Apply these conventions to quickly evaluate readability and maintainability.

You should decompose large React components when a single file contains multiple components or becomes difficult to read. Following the one-component-per-file convention prevents bloated components and maintains clean separation of concerns.