frontend-patterns

name	frontend-patterns
description	Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.
when_to_use	Use when building or reviewing React or Next.js UI, custom hooks, state management, or frontend performance work.

Frontend Development Patterns

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

Pattern Categories

Component Patterns

Composition over inheritance, compound components, render props. See references/component-patterns.md for implementations.

Custom Hooks

Reusable hooks: useToggle, useDebounce; server state via TanStack Query / SWR. See references/hooks-patterns.md for implementations.

State Management & Performance

Context + Reducer pattern, memoization, code splitting, virtualization. See references/state-performance.md for implementations.

Forms, Error Boundaries, Animation & Accessibility

Controlled forms with validation, ErrorBoundary, motion (formerly Framer Motion), keyboard navigation, focus management. See references/forms-errors-a11y.md for implementations.

Quick Decision Guide

Need	Pattern
Shared state across siblings	Context + Reducer
Expensive computation (no React Compiler)	useMemo
Stable callback reference (no React Compiler)	useCallback
Prevent unnecessary re-renders (no React Compiler)	React.memo
Large list rendering	Virtualization (@tanstack/react-virtual)
Heavy component	lazy() + Suspense
Form validation	Controlled form + error state
Graceful error handling	ErrorBoundary class component
Keyboard accessible UI	role, aria-*, onKeyDown handlers

Note: On projects using React Compiler, manual memoization (useMemo/useCallback/React.memo) is generally unnecessary; add it only when profiling shows a real problem.

Remember: Choose patterns that fit your project complexity. Not every project needs every pattern.