Q: When should I use React memoization and virtualization for performance?

Use React memoization (useMemo, useCallback, React.memo) and virtualization (@tanstack/react-virtual) when profiler-driven analysis reveals inefficient rendering patterns or long lists causing high render costs and interaction latency.

Q: What is the best way to analyze and enforce bundle size budgets in React?

The best way to enforce bundle size budgets is to use bundle analyzers to inspect component output, apply lazy loading with React Suspense, and monitor Core Web Vitals continuously to prevent performance regressions.

Q: How do I prevent CLS when implementing lazy loading in Next.js?

Prevent CLS during lazy loading by defining explicit dimensions and sizes for components and images. Use next/image with priority and sizes attributes to ensure visual stability and meet the CLS < 0.1 target.

Q: Does this approach work for measuring Core Web Vitals across all React components?

Yes, this approach works for measuring Core Web Vitals across React components by collecting and reporting metrics using Web Vitals tools and the React DevTools Profiler to identify and fix specific render bottlenecks.

Question 1

How do I reduce LCP and INP in my Next.js application?

Accepted Answer

Reduce LCP and INP in Next.js by profiling render costs with React DevTools Profiler, optimizing images via next/image, and applying code splitting with next/dynamic. Enforce performance budgets to meet targets like LCP < 2.5s and INP < 200ms.

Question 2

When should I use React memoization and virtualization for performance?

Accepted Answer

Use React memoization (useMemo, useCallback, React.memo) and virtualization (@tanstack/react-virtual) when profiler-driven analysis reveals inefficient rendering patterns or long lists causing high render costs and interaction latency.

Question 3

What is the best way to analyze and enforce bundle size budgets in React?

Accepted Answer

The best way to enforce bundle size budgets is to use bundle analyzers to inspect component output, apply lazy loading with React Suspense, and monitor Core Web Vitals continuously to prevent performance regressions.

Question 4

How do I prevent CLS when implementing lazy loading in Next.js?

Accepted Answer

Prevent CLS during lazy loading by defining explicit dimensions and sizes for components and images. Use next/image with priority and sizes attributes to ensure visual stability and meet the CLS < 0.1 target.

Question 5

Does this approach work for measuring Core Web Vitals across all React components?

Accepted Answer

Yes, this approach works for measuring Core Web Vitals across React components by collecting and reporting metrics using Web Vitals tools and the React DevTools Profiler to identify and fix specific render bottlenecks.

performance-rules

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Core Features & Use Cases

Quick Start

Frequently Asked Questions about performance-rules

Related Skills

performance-profiling

Web Vitals Monitoring Skill

lazy-loading-strategy

advanced-caching-strategies