React Component Patterns

Priority: P0 (CRITICAL)

Standards for building scalable, maintainable React components.

Implementation Guidelines

• Function Components: Only hooks. No classes.
• Composition: Use children prop. Avoid inheritance.
• Props: Explicit TS interfaces. Destructure in params.
• Boolean Props: Shorthand <Cmp isVisible /> vs isVisible={true}.
• Imports: Group: Built-in -> External -> Internal -> Styles.
• Error Boundaries: Wrap app/features with react-error-boundary.
• Size: Small (< 250 lines). One component per file.
• Naming: PascalCase components. use* hooks.
• Exports: Named exports only.
• Conditionals: Ternary (Cond ? <A/> : <B/>) over && for rendering consistency.
• Hoisting: Extract static JSX/Objects outside component to prevent recreation.