react-performance

Q: How do I install react-performance?

Run npx skills add https://github.com/oakoss/agent-skills --skill react-performance in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/react-performance/ (personal) or .claude/skills/react-performance/ (project).

by oakossCode Quality & Workflow

React performance optimization patterns including memoization, code splitting, bundle size reduction, re-render elimination, and profiling. Covers React Compiler automatic optimization, manual memo/useMemo/useCallback targeting, React.lazy with Suspense, barrel file avoidance, content-visibility for large lists, startTransition for non-urgent updates, and React DevTools profiling. Use when optimizing React app performance, reducing bundle size, eliminating unnecessary re-renders, debugging slow components, code splitting, or profiling rendering bottlenecks. Use for performance audit, bundle analysis, re-render diagnosis, lazy loading, virtualization.

Installs: 153
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/oakoss/agent-skills --skill react-performance

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads react-performance automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

Rendering optimization: memo, useMemo, useCallback, compiler, re-render elimination
Code splitting: React.lazy, Suspense, dynamic imports, bundle optimization
Profiling and debugging: DevTools, performance measurement, common bottlenecks

FAQ

What does the react-performance skill do?

How do I install react-performance?

Run npx skills add https://github.com/oakoss/agent-skills --skill react-performance in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/react-performance/ (personal) or .claude/skills/react-performance/ (project).

Which AI agents can use react-performance?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is react-performance safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains react-performance?

It is published by oakoss in oakoss/agent-skills. It has 153 recorded installs.

More from oakoss/agent-skills

View all →

ui-ux-polish

oakoss/agent-skills

Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.

Frontend & Design541 installs