react-performance
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 |
More from oakoss/agent-skills
playwright
|
200ui-ux-polish
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.
153find-skills
|
118knowledge-graph-builder
>
101tailwind
Tailwind CSS v4 patterns and design systems. Use when configuring Tailwind themes, building components, implementing dark mode, using container queries, migrating from v3, integrating shadcn/ui, or fixing build errors. Use for tailwind, css, styling, theme, design-tokens.
85pnpm-workspace
pnpm workspace monorepo management with filtering, catalogs, and shared configs. Use when setting up monorepos, managing workspace dependencies, filtering package commands, or sharing configuration across packages.
78