React/Next.js Patterns

State Management Policies

Always Use Functional Updates

// GOOD
setCount(prev => prev + 1)

// BAD: Can be stale in async
setCount(count + 1)

Context Null Check Required

const context = useContext(MyContext)
if (!context) throw new Error('Must be used within Provider')

Conditional Rendering

// GOOD: Clear conditions
{isLoading && <Spinner />}
{error && <ErrorMessage error={error} />}
{data && <DataDisplay data={data} />}

// BAD: Ternary hell
{isLoading ? <Spinner /> : error ? <ErrorMessage /> : data ? <DataDisplay /> : null}

Performance Policies

Memoization Guidelines

Default: Let React Compiler handle memoization. Manual useMemo/useCallback/React.memo only when precise control over re-render boundaries is needed.

Code Splitting - Use for Heavy Components

const HeavyChart = lazy(() => import('./HeavyChart'))

<Suspense fallback={<Spinner />}>
  <HeavyChart />
</Suspense>

Virtualization - Use for 100+ Items

Use @tanstack/react-virtual for long lists.

Accessibility Policies

Always Use useId for Form Labels

const hintId = useId()
<input aria-describedby={hintId} />
<p id={hintId}>Hint text</p>

Modal Focus Management Required

• Save previous focus on open
• Focus modal on open
• Restore focus on close
• Handle Escape key

Anti-Patterns

Component Design Policies

Prefer Composition

Composition over configuration — components should be assembled, not configured via props.

// GOOD
<Card>
  <CardHeader>Title</CardHeader>
  <CardBody>Content</CardBody>
</Card>

// BAD: Props drilling
<Card header="Title" body="Content" footer="..." />

Compound Components for Related UI

Use Context to share state between related components (Tabs, Accordion, etc.).