#601

Global Rank · of 601 Skills

react-performance AI Agent Skill

View Source: oakoss/agent-skills

Safe

Installation

npx skills add oakoss/agent-skills --skill react-performance

45

Installs

React Performance

Overview

Dedicated performance optimization skill for React applications. Covers the full spectrum from build-time optimizations (code splitting, barrel file avoidance) through runtime techniques (memoization, transitions, content-visibility) to diagnostic tooling (React DevTools Profiler, bundle analyzers).

When to use: Reducing Time to Interactive, shrinking bundle size, eliminating re-renders, profiling slow components, optimizing large lists, lazy loading heavy dependencies, auditing React app performance.

When NOT to use: General React component patterns (use react-patterns skill), framework-specific optimizations like Next.js caching (use framework skill), non-React performance (network, database, CDN).

Quick Reference

Category Technique Key Points
Compiler React Compiler Automatic memoization at build time; eliminates manual memo/useMemo/useCallback
Memoization React.memo(Component) Wrap components receiving stable primitive props from frequently re-rendering parents
Memoization useMemo(fn, deps) Expensive computations only: sorting, filtering, Set/Map construction
Memoization useCallback(fn, deps) Only when passed to memoized children; use functional setState for stable refs
Splitting React.lazy(() => import()) Lazy-load heavy components with <Suspense> fallback
Splitting Preload on intent Trigger import() on hover/focus for perceived speed
Bundle Direct imports Avoid barrel files; import from specific paths to reduce module count
Bundle Defer third-party Load analytics, logging after hydration
Re-renders startTransition Mark non-urgent updates (search, scroll tracking) as interruptible
Re-renders Functional setState setState(prev => ...) eliminates state dependencies from callbacks
Re-renders Derived state Subscribe to booleans, not continuous values; compute during render
Re-renders Defer state reads Read dynamic state (searchParams) inside callbacks, not at render
Rendering content-visibility: auto Skip layout/paint for off-screen items in long lists
Rendering Hoist static JSX Extract constant elements outside component functions
Profiling React DevTools Profiler Record renders, identify slow components, flamegraph analysis
Profiling Bundle analyzer Visualize chunk sizes, find oversized dependencies

Common Mistakes

Mistake Correct Pattern
Wrapping everything in useMemo/useCallback Trust React Compiler first; only memoize expensive computations or memoized-child callbacks
Memoizing cheap operations like value * 2 Skip memo for simple primitives; overhead exceeds recomputation cost
Importing from barrel files (lucide-react, @mui/material) Import directly from specific paths or use optimizePackageImports
Loading analytics/tracking in the initial bundle Defer with lazy + mounted state to load after hydration
Subscribing to continuous values (window width) for boolean checks Use useMediaQuery or derived boolean to re-render only on threshold change
Referencing state in useCallback dependency array Use functional setState setState(prev => ...) for stable callbacks
Using useEffect to derive state from props Compute derived values during render; effects add an extra render cycle
Creating new object literals as props on every render Hoist static objects outside component; use useMemo for dynamic objects
Profiling in development mode Always profile production builds; dev mode includes extra warnings that skew results

Delegation

  • Profile and diagnose performance bottlenecks: Use Explore agent to run React DevTools Profiler, analyze bundle composition, and trace re-render cascades
  • Apply performance optimizations to existing code: Use Task agent to implement code splitting, add memoization boundaries, and optimize rendering
  • Plan performance improvement strategy: Use Plan agent to prioritize optimizations by impact (waterfalls > bundle > re-renders) and create an optimization roadmap

If the react-patterns skill is available, delegate general component architecture and React 19 API questions to it.
Otherwise, recommend: npx skills add oakoss/agent-skills --skill react-patterns

References

Installs

Installs 45
Global Rank #601 of 601

Security Audit

ath Safe
socket Safe
Alerts: 0 Score: 90
snyk Low
EU EU-Hosted Inference API

Power your AI Agents with the best open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

GLM

GLM 5

$1.00 / $3.20

per M tokens

Kimi

Kimi K2.5

$0.60 / $2.80

per M tokens

MiniMax

MiniMax M2.5

$0.30 / $1.20

per M tokens

Qwen

Qwen3.5 122B

$0.40 / $3.00

per M tokens

How to use this skill

1

Install react-performance by running npx skills add oakoss/agent-skills --skill react-performance in your project directory. Run the install command above in your project directory. The skill file will be downloaded from GitHub and placed in your project.

2

No configuration needed. Your AI agent (Claude Code, Cursor, Windsurf, etc.) automatically detects installed skills and uses them as context when generating code.

3

The skill enhances your agent's understanding of react-performance, helping it follow established patterns, avoid common mistakes, and produce production-ready output.

What you get

Skills are plain-text instruction files — not executable code. They encode expert knowledge about frameworks, languages, or tools that your AI agent reads to improve its output. This means zero runtime overhead, no dependency conflicts, and full transparency: you can read and review every instruction before installing.

Compatibility

This skill works with any AI coding agent that supports the skills.sh format, including Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider, and other tools that read project-level context files. Skills are framework-agnostic at the transport level — the content inside determines which language or framework it applies to.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU Made in Europe

Chat with 100+ AI Models in one App.

Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

Start for free View pricing
Customer Support