react-patterns

React Patterns - Modern Development Patterns and Best Practices

Skills Overview

React Patterns provides a complete design guide for building production-ready React applications, covering component design principles, Hook patterns, state management selection, performance optimization strategies, and TypeScript best practices. It helps developers write maintainable, high-performance React code.

Use Cases

Designing the Architecture for a New React Project

Determine the component breakdown, state management strategy, and technology stack for a new project. Build a scalable React application from scratch to avoid costly refactoring later.

Optimizing and Refactoring Existing React Code

Identify and eliminate anti-patterns in the code, such as overly large components, prop drilling, and excessive use of useEffect, improving code quality and maintainability.

Establishing Development Conventions for a React Team

Create unified component design standards, Hook usage rules, error-handling patterns, and testing principles for the team to ensure consistent code style and maintainability.

Core Features

Guidance on Component Design Patterns

Provides usage guidelines for four component types (Server, Client, Presentational, Container). Clearly defines component responsibility-splitting principles, including single responsibility, passing events via props, composition over inheritance, and other design rules to help developers build clear and maintainable component structures.

Hook Patterns and Extraction Strategy

Defines when and how to extract custom Hooks, including common patterns such as useLocalStorage, useDebounce, useFetch, and useForm. Emphasizes top-level Hook calls, order consistency, and the importance of cleaning up side effects to enable logic reuse and simplify code.

State Management Decision Tree

Offers a clear decision path based on application complexity: useState/useReducer for simple scenarios, Context for locally shared state, React Query/SWR for server state, and Zustand/Redux Toolkit for complex global state—along with explicit strategies for where to place different ranges of state.

Applying New Features in React 19

Introduces the purposes of new Hooks such as useActionState, useOptimistic, and use, and explains the automatic memoization optimizations brought by the React Compiler. Guides developers to leverage the latest features to reduce manually optimized code.

Performance Optimization Methodology

Provides a systematic performance optimization workflow: first confirm whether it’s truly slow, use DevTools to analyze, locate bottlenecks, and apply targeted fixes. Covers correct use cases for virtual lists, useMemo, and useCallback, preventing premature optimization.

Error Handling System

Defines a layered strategy for placing error boundaries (application-level, feature-level, component-level) and a complete error recovery process: display degraded UI, log errors, provide retry options, and protect user data.

TypeScript Type Patterns

Provides best practices for defining Props types, differentiating when to use Interface, Type, and Generic. Compiles common React types such as ReactNode, MouseEventHandler, and RefObject to improve type safety.

Testing Layering Principles

Establishes a testing pyramid: unit tests (pure functions and Hooks), integration tests (component behavior), and E2E tests (user flows). Clarifies testing priority: user-visible behavior, edge cases, error states, and accessibility.

Common Questions

When should a React component be split?

Split a component when it has multiple responsibilities, exceeds 200 lines, has more than 7 Props, or when some logic can be reused across multiple components. The guiding principle is single responsibility: presentational components handle only UI rendering, while container components handle state and logic. Benefits include better testability, clearer separation of concerns, and higher code reuse.

When do custom Hooks need to be extracted?

Extract a custom Hook when there is duplicated state logic in the code (e.g., multiple components need synchronized local storage), complex side-effect management (e.g., debounced API calls), or when you need to separate component logic from the UI. Common extraction scenarios include: useLocalStorage (storage logic shared across components), useDebounce (multiple debounced values), useFetch (repeated data fetching patterns), and useForm (complex form state management). Custom Hooks must start with "use" and be called at the top level of the component.

How should a React state management solution be chosen?

Decide based on state complexity and sharing scope: useState within a single component; lift state between parent and child components; share state across a component subtree using Context; for simple global state use Context + useReducer; for server state use React Query/SWR; for complex global state use Zustand or Redux Toolkit. The key is to start with the simplest solution and upgrade only when you hit real pain points, avoiding introducing heavy state management libraries from the beginning.

What is the correct order for React performance optimization?

Optimization must follow a strict order: first confirm whether there is truly a performance problem (user-perceived), then use the React DevTools Profiler to locate the bottleneck, and finally apply targeted fixes. Common optimization techniques include virtualizing large lists, using useMemo for expensive computations, and using useCallback for stable references. Remember: don’t optimize too early. Most React applications don’t need manual optimization, and React 19’s Compiler will automatically handle most memoization needs.

What new patterns and features are introduced in React 19?

React 19 introduces three important new Hooks: useActionState for form submission state management, useOptimistic for optimistic UI updates (e.g., likes, bookmarks), and use for directly reading resources during rendering (simplifying Promise and Context reads). Even more importantly, the React Compiler can automatically optimize components, reducing the need to manually use useMemo and useCallback—so developers can focus on writing pure components.

What anti-patterns should be avoided in React component design?

Common anti-patterns include: deep prop drilling (should use Context), giant components (should be split by responsibility), misusing useEffect to handle all logic (prefer Server Components), using array indices as keys (should use stable unique IDs), premature optimization (Profile first, then optimize), and using any for Props types (should define types clearly with TypeScript). Avoiding these anti-patterns significantly improves maintainability and performance.

What are best practices for React + TypeScript development?

Prefer using Interface to define component Props, which makes extension easier. Use Type for union types and complex types. Use Generic for reusable components. Common types include: ReactNode (children), MouseEventHandler (event handling), and RefObject (Refs). Avoid defining components directly using the FC type—declaring function components directly is clearer. Add explicit comments for component Props, especially for boolean Props.

How should React error handling be designed?

Create a layered error boundary system: place a global error boundary at the application. Yet, note that it can only capture errors during rendering, lifecycle methods, and constructors of the whole tree, not event handlers. Place feature-level error boundaries for routes or features, and place component-level error boundaries around components with specific risks. Error recovery strategies include: displaying a friendly degraded UI, logging errors to a monitoring system, providing retry buttons, and protecting any user data that hasn’t been saved yet. Error boundaries cannot catch errors in event handlers—those require try-catch handling.