Skip to content

STD-COD-001: React Patterns & Component Architecture

1. Context

To prevent "Component Sprawl" and "Prop Drilling Hell". React is a library; we use it as an Architecture.

2. The Standard (The Floor)

<<<<<<< HEAD

  • [MUST] Adhere to Visual Spectrum: Components must align with the "Cinematic vs Transactional" spectrum defined in STD-ARC-004.

    origin/main

  • [MUST] Separated Logic: Business logic MUST reside in Custom Hooks (useMyFeature) or Server Actions. Components are for Rendering only.
  • [MUST] Server Components Default: All components are Server Components by default. Add 'use client' only when interactivity (state/effects) is required.
  • [MUST] Composition Over Inheritance: Use children props and Slots for complex layouts instead of large configuration objects.
  • [MUST] Trusted Props: Do not blindly pass ...props to underlying DOM elements unless the component is a designated "Primitive".

3. Best Practices (The Path)

  • [SHOULD] The Container/Presentational Pattern: Server Components (Containers) fetch data; Client Components (Presentational) render it.
  • [SHOULD] Error Boundaries: Wrap feature roots in Error Boundaries to prevent full-page crashes.

5. Version History

Version Date Author Change
1.0 2026-01-25 AI Established React Patterns

Version History

Version Date Author Change
0.1.0 2026-01-26 Antigravity Initial Audit & Metadata Injection