React Best Practices

Component Design

• One component per file. Name the file the same as the component.
• Prefer function components — never write class components.
• Keep components small and focused. If a component exceeds ~150 lines, split it.
• Define components at module scope — never define components inside other components (breaks state preservation and identity).
• Colocate related files (component, hook, types, styles, tests) in the same directory.

Props

• Destructure props in the function signature:

function UserCard({ name, email, avatar }: UserCardProps) { ... }

• Use children via React.PropsWithChildren or explicit children: React.ReactNode.