react-performance

Optimize React/TypeScript frontends with memoization, code-splitting, and selective imports.

Updated Jan 6, 2026
One-click install
npx skills add https://github.com/xxziiko/subagent --skill react-performance-xxziiko
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-performance
Source: https://github.com/xxziiko/subagent/tree/main/.claude/skills/react-performance
Command: npx skills add https://github.com/xxziiko/subagent --skill react-performance-xxziiko

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps tame React performance bottlenecks by providing structured guidelines to optimize asynchronous processing, rendering efficiency, and bundle size.

Core Features & Use Cases

  • Async optimization: parallelize independent tasks using Promise.all and minimize unnecessary awaits.
  • Render efficiency: apply memoization, dependency management, and selective imports to reduce re-renders.
  • Bundle discipline: favor tree-shaking, direct imports, and code-splitting to lower initial load.
  • Use Case: Imagine a data-heavy dashboard; apply these patterns to reduce initial load time and improve perceived performance.

Quick Start

Start by auditing a component for re-renders, enabling memoization, and introducing route-based code-splitting; then adjust imports to avoid barrel exports.

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 renders in a data-heavy dashboard?

Fix slow React renders by auditing components for unnecessary re-renders and applying memoization. You can further improve perceived performance by parallelizing data-fetching delays with Promise.all and introducing route-based code-splitting.

What is the best way to reduce React bundle size?

The best way to reduce React bundle size is by favoring tree-shaking, direct imports, and code-splitting. Avoiding barrel exports and using selective imports lower the initial load time and sustain fast UI performance in TypeScript frontends.

Can I use these React performance patterns with TypeScript?

Yes, you can apply these React performance patterns with TypeScript frontends across various projects. The optimization guidelines target rendering efficiency, bundle discipline, and asynchronous processing to resolve data-fetch delays and large bundles.

How do I optimize asynchronous processing to prevent UI delays in React?

Optimize asynchronous processing by parallelizing independent tasks using Promise.all and minimizing unnecessary awaits. This approach reduces data-fetch delays and improves perceived user experience in data-heavy applications.

Why does memoization fail to stop re-renders in my React components?

Memoization often fails to stop re-renders when dependency arrays are not minimal or properly managed. Disciplined export patterns and selective imports are required alongside memoization to sustain fast, predictable UI rendering efficiency.