react-performance

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

Updated Jan 21, 2026
One-click install
npx skills add https://github.com/mahamaneharouna9-cpu/Apex-invoice-billing-automation --skill react-performance-mahamaneharouna9-cpu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-performance
Source: https://github.com/mahamaneharouna9-cpu/Apex-invoice-billing-automation/tree/main/.opencode/skill/react-performance
Command: npx skills add https://github.com/mahamaneharouna9-cpu/Apex-invoice-billing-automation --skill react-performance-mahamaneharouna9-cpu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill addresses performance bottlenecks in React applications, ensuring smooth user experiences by optimizing rendering, bundle sizes, and memory usage.

Core Features & Use Cases

  • Identify Bottlenecks: Pinpoints slow renders, excessive re-renders, and memory leaks using profiling tools.
  • Optimize Bundles: Reduces application load times by analyzing and splitting code bundles.
  • Enhance Responsiveness: Improves Core Web Vitals and leverages React 18 concurrent features for a snappier UI.
  • Use Case: A React e-commerce site experiences slow page loads and janky scrolling on product listing pages. This Skill can analyze the bundle, identify large components, and implement virtualization and code splitting to fix these issues.

Quick Start

Analyze the performance of the React application in the current directory.

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 excessive re-renders?

Diagnose slow React component rendering by analyzing React DevTools Profiler data to pinpoint bottlenecks. Resolve excessive re-renders by implementing targeted solutions like memoization to prevent unnecessary calculations and optimize application performance.

What is the best way to reduce React bundle size and improve load times?

Reduce React bundle size by analyzing bundle reports to identify large components. Improve application load times by implementing targeted solutions like code splitting, which divides your application code into smaller chunks loaded on demand.

How can I improve Core Web Vitals using React 18 concurrent features?

Improve Core Web Vitals by leveraging React 18 concurrent features to enhance UI responsiveness. These features enable smoother rendering processes, ensuring a snappier user experience during complex application interactions.

How do I diagnose memory leaks in a React application?

Diagnose memory leaks in a React application by analyzing memory usage patterns. Use profiling tools to identify components holding onto memory unnecessarily and implement targeted solutions to release resources.

Does this React performance optimization require a specific project environment?

React performance optimization requires a React project environment with npm or yarn installed. You must provide access to this environment so the analysis can accurately diagnose rendering, bundle size, and memory issues.

How do I fix janky scrolling on React product listing pages?

Fix janky scrolling on React product listing pages by analyzing the bundle and identifying large components. Implement targeted solutions like list virtualization and code splitting to render only visible items, improving responsiveness.