Frontend Development Patterns

Contents

• When to Use
• Component Patterns
• Custom Hooks
• Performance Optimization
• References

Modern frontend patterns for React, Next.js, and performant user interfaces.

When to Use

• Building React components (composition, props, rendering)
• Managing state (useState, useReducer, Zustand, Context)
• Implementing data fetching (SWR, React Query, server components)
• Optimizing performance (memoization, virtualization, code splitting)
• Working with forms (validation, controlled inputs, Zod schemas)
• Building accessible, responsive UI patterns
• Implementing error boundaries and fallback UIs
• Creating distinctive, polished frontend interfaces with strong aesthetics
• Reviewing visual evidence to confirm that a UI change actually achieved its goal
• Deciding whether 3D is justified or whether a simpler visual approach would work better

Component Patterns

See references/component-patterns.md for full examples.

Custom Hooks

See references/hooks.md for implementations.

Performance Optimization

Memoization

// useMemo for expensive computations
const sorted = useMemo(() => items.sort(...), [items])

// useCallback for functions passed to children
const handleClick = useCallback(() => ..., [])

// React.memo for pure components
export const Item = React.memo(({ data }) => <div>{data}</div>)

Code Splitting

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

<Suspense fallback={<Skeleton />}>
  <HeavyComponent />
</Suspense>

Virtualization

Use @tanstack/react-virtual for long lists (1000+ items).

See references/performance.md for full examples.

References

• Component Patterns - Composition, compound components, render props, error boundaries
• Hooks - useToggle, useQuery, useDebounce, Context+Reducer
• Performance - Memoization, code splitting, virtualization
• Forms & Accessibility - Form validation, animations, keyboard nav, focus management
• Error Boundaries - React error boundaries, Next.js error handling, async error patterns, error reporting
• Design Aesthetics - Distinctive UI design, typography, color, motion, spatial composition
• Visual Validation - Adversarial screenshot review, visual QA checklists, and evidence-first UI verification
• 3D Experience - When 3D belongs in the interface, stack selection, and GLB pipeline checks

Remember: Choose patterns that fit your project complexity. Start simple, optimize when needed.