React Standards

Components

• •Split god components (500+ lines) by responsibility
• •One component per file — colocate small helpers only if tightly coupled
• •Prefer composition over prop drilling (4+ levels = use Context or state management)
• •NEVER use React.FC — type props directly: const Comp = ({ title }: CompProps) => {}

State

• •Derived data = compute at render, NEVER store in state
• •NEVER mutate state — create new arrays/objects
• •Functional updates: setCount(prev => prev + 1)
• •Lazy initialization: useState(() => expensiveCalc())
• •Colocate state as close to usage as possible — lift only when shared

Hooks

• •ALWAYS call hooks unconditionally — use the result conditionally
• •useCallback for functions passed to list items or memoized children
• •useMemo only when computation is genuinely expensive — profile first
• •startTransition for non-urgent updates (search, filtering)
• •Custom hooks = use + verb: useAuth, useFetchUsers

JSX

• •count > 0 && NOT count && (avoids rendering 0)
• •Keys = unique stable IDs, NEVER array index
• •Fragment <> over wrapping <div> when no DOM node needed
• •Self-close components without children: <Button />

Styling

• •Tailwind inline classes, ALWAYS
• •cn() utility mandatory for conditional classes — NEVER template literals
• •cva is the ONLY exception for extracting class variants

Data Fetching

• •Result pattern [error, data] — NEVER throw in components
• •Loading/error/success states: always handle all three
• •Prefer server components for initial data when using RSC frameworks