const data = await fetchUser()
const [state, setState] = useState()
47 Interactive Patterns

Write Better
React Code

Interactive visualizations of performance patterns and best practices.See the wrong way, then watch it transform into the right way.

Based on React Best Practices by Vercel

47
Patterns
8
Categories
90+
Examples
Start LearningView on GitHub
Scroll

All Skills

Browse through our collection of React best practices. Each skill includes interactive code examples showing common mistakes and optimal solutions.

Showing 47 of 47 skills
Advanced

Store Event Handlers in Refs

stable subscriptions

Advanced

useLatest for Stable Callback Refs

prevents effect re-runs

Async

Prevent Waterfall Chains in API Routes

2-10× improvement

Async

Defer Await Until Needed

avoids blocking unused code paths

Async

Dependency-Based Parallelization

2-10× improvement

Async

Promise.all() for Independent Operations

2-10× improvement

Async

Strategic Suspense Boundaries

faster initial paint

Bundle

Avoid Barrel File Imports

200-800ms import cost, slow builds

Bundle

Conditional Module Loading

loads large data only when needed

Bundle

Defer Non-Critical Third-Party Libraries

loads after hydration

Bundle

Dynamic Imports for Heavy Components

directly affects TTI and LCP

Bundle

Preload Based on User Intent

reduces perceived latency

Client

Deduplicate Global Event Listeners

single listener for N components

Client

Version and Minimize localStorage Data

prevents schema conflicts, reduces storage size

Client

Use Passive Event Listeners for Scrolling Performance

eliminates scroll delay caused by event listeners

Client

Use SWR for Automatic Deduplication

automatic deduplication

JavaScript

Batch DOM CSS Changes

reduces reflows/repaints

JavaScript

Cache Repeated Function Calls

avoid redundant computation

JavaScript

Cache Property Access in Loops

reduces lookups

JavaScript

Cache Storage API Calls

reduces expensive I/O

JavaScript

Combine Multiple Array Iterations

reduces iterations

JavaScript

Early Return from Functions

avoids unnecessary computation

JavaScript

Hoist RegExp Creation

avoids recreation

JavaScript

Build Index Maps for Repeated Lookups

1M ops to 2K ops

JavaScript

Early Length Check for Array Comparisons

avoids expensive operations when lengths differ

JavaScript

Use Loop for Min/Max Instead of Sort

O(n) instead of O(n log n)

JavaScript

Use Set/Map for O(1) Lookups

O(n) to O(1)

JavaScript

Use toSorted() Instead of sort() for Immutability

prevents mutation bugs in React state

Rendering

Use Activity Component for Show/Hide

preserves state/DOM

Rendering

Animate SVG Wrapper Instead of SVG Element

enables hardware acceleration

Rendering

Use Explicit Conditional Rendering

prevents rendering 0 or NaN

Rendering

CSS content-visibility for Long Lists

faster initial render

Rendering

Hoist Static JSX Elements

avoids re-creation

Rendering

Prevent Hydration Mismatch Without Flickering

avoids visual flicker and hydration errors

Rendering

Optimize SVG Precision

reduces file size

Re-renders

Defer State Reads to Usage Point

avoids unnecessary subscriptions

Re-renders

Narrow Effect Dependencies

minimizes effect re-runs

Re-renders

Subscribe to Derived State

reduces re-render frequency

Re-renders

Use Functional setState Updates

prevents stale closures and unnecessary callback recreations

Re-renders

Use Lazy State Initialization

wasted computation on every render

Re-renders

Extract to Memoized Components

enables early returns

Re-renders

Use Transitions for Non-Urgent Updates

maintains UI responsiveness

Server

Use after() for Non-Blocking Operations

faster response times

Server

Cross-Request LRU Caching

caches across requests

Server

Per-Request Deduplication with React.cache()

deduplicates within request

Server

Parallel Data Fetching with Component Composition

eliminates server-side waterfalls

Server

Minimize Serialization at RSC Boundaries

reduces data transfer size