skills.rest
VoTruongDanh
VoTruongDanhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-performance

Profile React apps with React DevTools and optimize re-renders and bundle size.

Updated Jan 15, 2026
Search Tags:#performance#react#optimization#profiling#virtualization#code-splitting#react-devtools
One-click install
npx skills add https://github.com/VoTruongDanh/Sentiment --skill react-performance-votruongdanh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-performance
Source: https://github.com/VoTruongDanh/Sentiment/tree/main/.agent/skills/react-performance
Command: npx skills add https://github.com/VoTruongDanh/Sentiment --skill react-performance-votruongdanh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-window, webpack-bundle-analyzer, web-vitals, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enhances React application performance by identifying and resolving rendering bottlenecks, reducing load times, and improving user experience.

Core Features & Use Cases

  • Profiling and Analysis: Use React DevTools Profiler to detect slow render components and unnecessary re-renders.
  • Component Optimization: Implement React.memo, useCallback, and useMemo to optimize reactivity and reduce rendering overhead.
  • Bundle and Code Splitting: Employ React.lazy and Suspense for route and component-level code splitting to improve load times and reduce bundle size.
  • Memory Leak Prevention: Detect and eliminate memory leaks caused by uncleaned event listeners, timers, or large data retention.
  • Virtualization: Integrate react-window or similar libraries to efficiently render large lists and grids, maintaining smooth scrolling.
  • Core Web Vitals Enhancement: Use image optimization, skeleton screens, and resource hints to improve FCP, LCP, and CLS metrics.
  • Concurrent Features: Utilize useTransition and useDeferredValue for non-urgent updates, enhancing perceived responsiveness.

Quick Start

Initiate performance profiling with React DevTools Profiler, optimize slow components based on findings, and gradually apply code splitting and virtualization strategies to accelerate your React app.

Frequently Asked Questions about react-performance

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

FAQPage Schema
How do I fix slow React component rendering and unnecessary re-renders?▼

Fix slow React component rendering by profiling with React DevTools to detect bottlenecks, then applying React.memo, useCallback, and useMemo to optimize reactivity and reduce rendering overhead.

What is the best way to reduce bundle size in a React production application?▼

The best way to reduce bundle size is employing React.lazy and Suspense for route and component-level code splitting, combined with webpack-bundle-analyzer to visualize and eliminate bloat.

How do I efficiently render large lists and grids in React without freezing the UI?▼

Efficiently render large lists in React by integrating virtualization libraries like react-window, which renders only visible items to maintain smooth scrolling performance.

Can I use React 18 concurrent features to improve perceived responsiveness?▼

Yes, utilize React 18 concurrent features like useTransition and useDeferredValue to defer non-urgent updates, significantly enhancing perceived responsiveness during heavy interactions.

How do I prevent memory leaks caused by uncleaned event listeners and timers in React?▼

Prevent memory leaks by detecting and eliminating uncleaned event listeners, timers, or large data retention, profiling React apps to ensure efficient resource cleanup in production environments.

How do I improve Core Web Vitals like FCP, LCP, and CLS in my React app?▼

Improve Core Web Vitals by using image optimization, skeleton screens, and resource hints, measuring results with web-vitals to ensure efficient and responsive React applications.

Related Skills

Explore More Software Engineering Skills→
ripgraphicsripgraphics

react-performance

Diagnose React rendering bottlenecks with React DevTools Profiler and apply optimization strategies.

Community
Advanced
ariesanhthuariesanhthu

react-performance

Diagnose React rendering, bundle size, and Core Web Vitals issues.

Community
Advanced
jholhewresjholhewres
3

bundler-analyze

Analyze JavaScript bundle sizes for Vite and Webpack projects.

Community
Basic
januarfontijanuarfonti
10

rsc-data-optimizer

Convert client-side data fetching in Next.js to React Server Components.

Community
Intermediate