react-performance

Profile React renders and implement code-splitting, virtualization, and memory management.

Updated Apr 9, 2024

Search Tags:#performance #react #profiling #virtualization #memory-management #code-splitting #web-vitals

Ready to run

npx skills add https://github.com/nhonvo/Powershell --skill react-performance-nhonvo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-performance
Source: https://github.com/nhonvo/Powershell/tree/main/antigrafity-config/.agent/skills/react-performance
Command: npx skills add https://github.com/nhonvo/Powershell --skill react-performance-nhonvo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React performance optimization and profiling guidance to identify and fix bottlenecks in React apps.

Core Features & Use Cases

Profiling render performance with React DevTools Profiler and web-vitals instrumentation.
Implementing code-splitting, virtualization, and memory management to reduce bundle size and improve user-perceived performance.
Use Case: When a page scrolls slowly due to rendering large lists, apply virtualization and selective rendering to restore smoothness.

Quick Start

Profile a slow component with React DevTools Profiler and apply memoization, code-splitting, and virtualization to improve render performance.

Frequently Asked Questions about react-performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I profile slow React component renders?▼

Fix React performance bottlenecks causing slow page scrolling by applying list virtualization and selective rendering techniques. Virtualization renders only the visible items in a large list, drastically reducing DOM nodes and restoring smooth scroll performance.

What is the best way to reduce large React bundle sizes?▼

Reduce large React bundle sizes by implementing code-splitting strategies that load JavaScript lazily. This approach divides your application into smaller chunks, sending less code initially and improving user-perceived performance during the first load.

How do I fix memory leaks in a React application?▼

Fix memory leaks in a React application by applying proper memory-management patterns during component unmounting and effect cleanup. Identifying and remediating these leaks prevents excessive memory consumption and stabilizes long-running web apps.

How do I instrument Core Web Vitals in a React app?▼

Instrument Core Web Vitals in a React app by integrating web-vitals measurement libraries to track key performance metrics. This instrumentation captures real user timing data for rendering and loading, guiding ongoing performance improvements.

Why does my React app re-render unnecessarily and how do I stop it?▼

React apps re-render unnecessarily due to unstable props or missing memoization, which you can stop by profiling render behavior and applying selective rendering patterns. Identifying these bottlenecks with the React DevTools Profiler allows you to isolate and prevent wasted renders.