react-impl-performance

Analyze React render performance and optimize re-renders and bundle size.

6|Updated Mar 19, 2026
One-click install
npx skills add https://github.com/OpenAEC-Foundation/React-Claude-Skill-Package --skill react-impl-performance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-impl-performance
Source: https://github.com/OpenAEC-Foundation/React-Claude-Skill-Package/tree/main/skills/source/react-impl/react-impl-performance
Command: npx skills add https://github.com/OpenAEC-Foundation/React-Claude-Skill-Package --skill react-impl-performance

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Optimizes render performance and guides React developers through proven techniques to avoid premature optimization, bottlenecks, and heavy re-renders. It covers strategies for memoization, code splitting, profiling, and resource optimization to keep apps fast and maintainable.

Core Features & Use Cases

  • Guidance on memoization (React.memo, useMemo, useCallback)
  • Use of React Compiler (React 19) and Profiler for performance measurement
  • Techniques for code splitting, lazy loading, virtualization, and image optimization
  • Practical patterns for selective optimization and avoiding common pitfalls

Quick Start

Measure a component with Profiler, then apply memoization only after confirming a bottleneck.

Frequently Asked Questions about react-impl-performance

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

FAQPage Schema
How do I fix unnecessary re-renders in my React app?▼

Fix unnecessary re-renders in React by measuring components with the Profiler to confirm bottlenecks, then selectively applying memoization strategies like React.memo, useMemo, and useCallback to optimize render performance.

When should I use memoization in React?▼

Use memoization in React only after confirming a render bottleneck with the Profiler. Apply React.memo, useMemo, and useCallback selectively to avoid premature optimization and keep your application maintainable.

Does this React performance optimization guidance work with React 19?▼

Yes, the React performance optimization guidance supports React 18 and 19 projects using TypeScript, including specific strategies for leveraging the React Compiler to automate memoization and reduce heavy re-renders.

What's the best way to reduce bundle size in a React application?▼

Reduce bundle size in a React application by applying code splitting and lazy loading techniques. These strategies defer loading non-critical resources, improving initial load performance and overall resource optimization.

How do I profile React component render performance?▼

Profile React component render performance by using the React Profiler to measure render times and identify bottlenecks. This confirms exactly where selective optimization and memoization are actually needed.