[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71HXP6CTY4KFN0QVMMN0V7J":3,"skill-same:01M71HXP6CTY4KFN0QVMMN0V7J":111},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":66,"commitSha":67,"skillDirectory":68,"forksCount":69,"repositoryHtmlUrl":70,"repositoryHomepageUrl":6,"ownerHtmlUrl":71,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":72,"install":73,"resources":86},"01M71HXP6CTY4KFN0QVMMN0V7J","react-performance-optimizer",null,"Optimize React apps for 60fps performance. Implements memoization, virtualization, code splitting, bundle optimization. Use for slow renders, large lists, bundle bloat. Activate on \"React performance\", \"slow render\", \"useMemo\", \"bundle size\", \"virtualization\". NOT for backend optimization, non-React frameworks, or premature optimization.","JSGforever\u002Fskillguard","JSGforever","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F85541948?v=4","01M71FQD3E132VMR5F4TAYX3YS","01M71FQD4DYW0XJ4XQ4YQH75Y9",2,"GPL-3.0","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--react-performance-optimizer\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"react performance","react performance optimizer","optimizer","performance","performance optimizer","react","nextjs","Bash","router","expert","activate","streaming","time","code","strategies","app","apps","render","2025","re","2026-11-10 10:12:30",false,"---\nname: react-performance-optimizer\ndescription: Optimize React apps for 60fps performance. Implements memoization, virtualization, code splitting, bundle optimization. Use for slow renders, large lists, bundle bloat. Activate on \"React performance\",\n  \"slow render\", \"useMemo\", \"bundle size\", \"virtualization\". NOT for backend optimization, non-React frameworks, or premature optimization.\nallowed-tools: Read,Write,Edit,Bash(npm:*)\nmetadata:\n  tags:\n  - react\n  - performance\n  - optimizer\n  - react-performance\n  - slow-render\n  pairs-with:\n  - skill: performance-profiling\n    reason: React profiling tools identify the re-render bottlenecks that optimization addresses\n  - skill: nextjs-app-router-expert\n    reason: RSC and streaming SSR in Next.js require React-specific performance strategies\n  - skill: data-viz-2025\n    reason: Data-heavy visualizations require React memoization and virtualization for smooth rendering\n  - skill: reactive-dashboard-performance\n    reason: Dashboard widgets with real-time data need the same React optimization patterns\n---\n\n# React Performance Optimizer\n\nExpert in diagnosing and fixing React performance issues to achieve buttery-smooth 60fps experiences.\n\n## When to Use\n\n✅ **Use for**:\n- Slow component re-renders\n- Large lists (>100 items) causing lag\n- Bundle size >500KB (gzipped)\n- Time to Interactive >3 seconds\n- Janky scrolling or animations\n- Memory leaks from unmounted components\n\n❌ **NOT for**:\n- Apps with <10 components (premature optimization)\n- Backend API slowness (fix the API)\n- Network latency (use caching\u002FCDN)\n- Non-React frameworks (use framework-specific tools)\n\n## Quick Decision Tree\n\n```\nIs your React app slow?\n├── Profiler shows >16ms renders? → Use memoization\n├── Lists with >100 items? → Use virtualization\n├── Bundle size >500KB? → Code splitting\n├── Lighthouse score <70? → Multiple optimizations\n└── Feels fast enough? → Don't optimize yet\n```\n\n---\n\n## Technology Selection\n\n### Performance Tools (2024)\n\n| Tool | Purpose | When to Use |\n|------|---------|-------------|\n| React DevTools Profiler | Find slow components | Always start here |\n| Lighthouse | Overall performance score | Before\u002Fafter comparison |\n| webpack-bundle-analyzer | Identify large dependencies | Bundle >500KB |\n| why-did-you-render | Unnecessary re-renders | Debug re-render storms |\n| React Compiler (2024+) | Automatic memoization | React 19+ |\n\n**Timeline**:\n- 2018: React.memo, useMemo, useCallback introduced\n- 2020: Concurrent Mode (now Concurrent Rendering)\n- 2022: Automatic batching in React 18\n- 2024: React Compiler (automatic optimization)\n- 2025+: React Compiler expected to replace manual memoization\n\n---\n\n## Common Anti-Patterns\n\n### Anti-Pattern 1: Premature Memoization\n\n**Novice thinking**: \"Wrap everything in useMemo for speed\"\n\n**Problem**: Adds complexity and overhead for negligible gains.\n\n**Wrong approach**:\n```typescript\n\u002F\u002F ❌ Over-optimization\nfunction UserCard({ user }) {\n  const fullName = useMemo(() => `${user.first} ${user.last}`, [user]);\n  const age = useMemo(() => new Date().getFullYear() - user.birthYear, [user]);\n\n  return \u003Cdiv>{fullName}, {age}\u003C\u002Fdiv>;\n}\n```\n\n**Why wrong**: String concatenation is faster than useMemo overhead.\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Simple is fast\nfunction UserCard({ user }) {\n  const fullName = `${user.first} ${user.last}`;\n  const age = new Date().getFullYear() - user.birthYear;\n\n  return \u003Cdiv>{fullName}, {age}\u003C\u002Fdiv>;\n}\n```\n\n**Rule of thumb**: Only memoize if:\n1. Computation takes >5ms (use Profiler to measure)\n2. Result used in dependency array\n3. Prevents child re-renders\n\n---\n\n### Anti-Pattern 2: Not Memoizing Callbacks\n\n**Problem**: New function instance on every render breaks React.memo.\n\n**Wrong approach**:\n```typescript\n\u002F\u002F ❌ Child re-renders on every parent render\nfunction Parent() {\n  const [count, setCount] = useState(0);\n\n  return (\n    \u003CChild onUpdate={() => setCount(count + 1)} \u002F>\n  );\n}\n\nconst Child = React.memo(({ onUpdate }) => {\n  return \u003Cbutton onClick={onUpdate}>Update\u003C\u002Fbutton>;\n});\n```\n\n**Why wrong**: Arrow function creates new reference → React.memo useless.\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Stable callback reference\nfunction Parent() {\n  const [count, setCount] = useState(0);\n\n  const handleUpdate = useCallback(() => {\n    setCount(c => c + 1);  \u002F\u002F Updater function avoids dependency\n  }, []);\n\n  return \u003CChild onUpdate={handleUpdate} \u002F>;\n}\n\nconst Child = React.memo(({ onUpdate }) => {\n  return \u003Cbutton onClick={onUpdate}>Update\u003C\u002Fbutton>;\n});\n```\n\n---\n\n### Anti-Pattern 3: Rendering Large Lists Without Virtualization\n\n**Problem**: Rendering 1000+ DOM nodes causes lag.\n\n**Symptom**: Scrolling feels janky, initial render slow.\n\n**Wrong approach**:\n```typescript\n\u002F\u002F ❌ Renders all 10,000 items\nfunction UserList({ users }) {\n  return (\n    \u003Cdiv>\n      {users.map(user => (\n        \u003CUserCard key={user.id} user={user} \u002F>\n      ))}\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Only renders visible items\nimport { FixedSizeList } from 'react-window';\n\nfunction UserList({ users }) {\n  return (\n    \u003CFixedSizeList\n      height={600}\n      itemCount={users.length}\n      itemSize={50}\n      width=\"100%\"\n    >\n      {({ index, style }) => (\n        \u003Cdiv style={style}>\n          \u003CUserCard user={users[index]} \u002F>\n        \u003C\u002Fdiv>\n      )}\n    \u003C\u002FFixedSizeList>\n  );\n}\n```\n\n**Impact**: 10,000 items: 5 seconds → 50ms render time.\n\n---\n\n### Anti-Pattern 4: No Code Splitting\n\n**Problem**: 2MB bundle downloaded upfront, slow initial load.\n\n**Wrong approach**:\n```typescript\n\u002F\u002F ❌ Everything in main bundle\nimport AdminPanel from '.\u002FAdminPanel';  \u002F\u002F 500KB\nimport Dashboard from '.\u002FDashboard';\nimport Settings from '.\u002FSettings';\n\nfunction App() {\n  return (\n    \u003CRoutes>\n      \u003CRoute path=\"\u002Fadmin\" element={\u003CAdminPanel \u002F>} \u002F>\n      \u003CRoute path=\"\u002Fdashboard\" element={\u003CDashboard \u002F>} \u002F>\n      \u003CRoute path=\"\u002Fsettings\" element={\u003CSettings \u002F>} \u002F>\n    \u003C\u002FRoutes>\n  );\n}\n```\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Lazy load routes\nimport { lazy, Suspense } from 'react';\n\nconst AdminPanel = lazy(() => import('.\u002FAdminPanel'));\nconst Dashboard = lazy(() => import('.\u002FDashboard'));\nconst Settings = lazy(() => import('.\u002FSettings'));\n\nfunction App() {\n  return (\n    \u003CSuspense fallback={\u003CLoading \u002F>}>\n      \u003CRoutes>\n        \u003CRoute path=\"\u002Fadmin\" element={\u003CAdminPanel \u002F>} \u002F>\n        \u003CRoute path=\"\u002Fdashboard\" element={\u003CDashboard \u002F>} \u002F>\n        \u003CRoute path=\"\u002Fsettings\" element={\u003CSettings \u002F>} \u002F>\n      \u003C\u002FRoutes>\n    \u003C\u002FSuspense>\n  );\n}\n```\n\n**Impact**: Initial bundle: 2MB → 300KB.\n\n---\n\n### Anti-Pattern 5: Expensive Operations in Render\n\n**Problem**: Heavy computation on every render.\n\n**Wrong approach**:\n```typescript\n\u002F\u002F ❌ Sorts on every render (even when data unchanged)\nfunction ProductList({ products }) {\n  const sorted = products.sort((a, b) => b.price - a.price);\n\n  return \u003Cdiv>{sorted.map(p => \u003CProduct product={p} \u002F>)}\u003C\u002Fdiv>;\n}\n```\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Memoize expensive operation\nfunction ProductList({ products }) {\n  const sorted = useMemo(\n    () => [...products].sort((a, b) => b.price - a.price),\n    [products]\n  );\n\n  return \u003Cdiv>{sorted.map(p => \u003CProduct product={p} \u002F>)}\u003C\u002Fdiv>;\n}\n```\n\n---\n\n## Implementation Patterns\n\n### Pattern 1: React.memo for Pure Components\n\n```typescript\n\u002F\u002F Prevent re-render when props unchanged\nconst ExpensiveComponent = React.memo(({ data }) => {\n  \u002F\u002F Complex rendering logic\n  return \u003Cdiv>{\u002F* ... *\u002F}\u003C\u002Fdiv>;\n});\n\n\u002F\u002F With custom comparison\nconst UserCard = React.memo(\n  ({ user }) => \u003Cdiv>{user.name}\u003C\u002Fdiv>,\n  (prevProps, nextProps) => {\n    \u002F\u002F Return true if props equal (skip re-render)\n    return prevProps.user.id === nextProps.user.id;\n  }\n);\n```\n\n### Pattern 2: useMemo for Expensive Calculations\n\n```typescript\nfunction DataTable({ rows, columns }) {\n  const sortedAndFiltered = useMemo(() => {\n    console.log('Recomputing...');  \u002F\u002F Only logs when rows\u002Fcolumns change\n\n    return rows\n      .filter(row => row.visible)\n      .sort((a, b) => a.timestamp - b.timestamp);\n  }, [rows, columns]);\n\n  return \u003CTable data={sortedAndFiltered} \u002F>;\n}\n```\n\n### Pattern 3: useCallback for Stable References\n\n```typescript\nfunction SearchBox({ onSearch }) {\n  const [query, setQuery] = useState('');\n\n  \u002F\u002F Stable reference, doesn't break child memoization\n  const handleSubmit = useCallback(() => {\n    onSearch(query);\n  }, [query, onSearch]);\n\n  return (\n    \u003Cform onSubmit={handleSubmit}>\n      \u003Cinput value={query} onChange={e => setQuery(e.target.value)} \u002F>\n    \u003C\u002Fform>\n  );\n}\n```\n\n### Pattern 4: Virtualization (react-window)\n\n```typescript\nimport { VariableSizeList } from 'react-window';\n\nfunction MessageList({ messages }) {\n  const getItemSize = (index) => {\n    \u002F\u002F Dynamic heights based on content\n    return messages[index].text.length > 100 ? 80 : 50;\n  };\n\n  return (\n    \u003CVariableSizeList\n      height={600}\n      itemCount={messages.length}\n      itemSize={getItemSize}\n      width=\"100%\"\n    >\n      {({ index, style }) => (\n        \u003Cdiv style={style}>\n          \u003CMessage message={messages[index]} \u002F>\n        \u003C\u002Fdiv>\n      )}\n    \u003C\u002FVariableSizeList>\n  );\n}\n```\n\n### Pattern 5: Code Splitting with React.lazy\n\n```typescript\n\u002F\u002F Route-based splitting\nconst routes = [\n  { path: '\u002Fhome', component: lazy(() => import('.\u002FHome')) },\n  { path: '\u002Fabout', component: lazy(() => import('.\u002FAbout')) },\n  { path: '\u002Fcontact', component: lazy(() => import('.\u002FContact')) }\n];\n\n\u002F\u002F Component-based splitting\nconst HeavyChart = lazy(() => import('.\u002FHeavyChart'));\n\nfunction Dashboard() {\n  const [showChart, setShowChart] = useState(false);\n\n  return (\n    \u003Cdiv>\n      \u003Cbutton onClick={() => setShowChart(true)}>Show Chart\u003C\u002Fbutton>\n\n      {showChart && (\n        \u003CSuspense fallback={\u003CSpinner \u002F>}>\n          \u003CHeavyChart \u002F>\n        \u003C\u002FSuspense>\n      )}\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n---\n\n## Production Checklist\n\n```\n□ Profiler analysis completed (identified slow components)\n□ Large lists use virtualization (>100 items)\n□ Routes code-split with React.lazy\n□ Heavy components lazy-loaded\n□ Callbacks memoized with useCallback\n□ Expensive computations use useMemo\n□ Pure components wrapped in React.memo\n□ Bundle analyzed (no duplicate dependencies)\n□ Tree-shaking enabled (ESM imports)\n□ Images optimized and lazy-loaded\n□ Lighthouse score >90\n□ Time to Interactive <3 seconds\n```\n\n---\n\n## When to Use vs Avoid\n\n| Scenario | Optimize? |\n|----------|-----------|\n| Rendering 1000+ list items | ✅ Yes - virtualize |\n| Sorting\u002Ffiltering large arrays | ✅ Yes - useMemo |\n| Passing callbacks to memoized children | ✅ Yes - useCallback |\n| String concatenation | ❌ No - fast enough |\n| Simple arithmetic | ❌ No - don't memoize |\n| 10-item list | ❌ No - premature optimization |\n\n---\n\n## References\n\n- `\u002Freferences\u002Fprofiling-guide.md` - How to use React DevTools Profiler\n- `\u002Freferences\u002Fbundle-optimization.md` - Reduce bundle size strategies\n- `\u002Freferences\u002Fmemory-leaks.md` - Detect and fix memory leaks\n\n## Scripts\n\n- `scripts\u002Fperformance_audit.ts` - Automated performance checks\n- `scripts\u002Fbundle_analyzer.sh` - Analyze and visualize bundle\n\n---\n\n**This skill guides**: React performance optimization | Memoization | Virtualization | Code splitting | Bundle optimization | Profiling\n\n","# React Performance Optimizer\n\nExpert in diagnosing and fixing React performance issues to achieve buttery-smooth 60fps experiences.\n\n## When to Use\n\n✅ **Use for**:\n- Slow component re-renders\n- Large lists (>100 items) causing lag\n- Bundle size >500KB (gzipped)\n- Time to Interactive >3 seconds\n- Janky scrolling or animations\n- Memory leaks from unmounted components\n\n❌ **NOT for**:\n- Apps with <10 components (premature optimization)\n- Backend API slowness (fix the API)\n- Network latency (use caching\u002FCDN)\n- Non-React frameworks (use framework-specific tools)\n\n## Quick Decision Tree\n\n```\nIs your React app slow?\n├── Profiler shows >16ms renders? → Use memoization\n├── Lists with >100 items? → Use virtualization\n├── Bundle size >500KB? → Code splitting\n├── Lighthouse score <70? → Multiple optimizations\n└── Feels fast enough? → Don't optimize yet\n```\n\n---\n\n## Technology Selection\n\n### Performance Tools (2024)\n\n| Tool | Purpose | When to Use |\n|------|---------|-------------|\n| React DevTools Profiler | Find slow components | Always start here |\n| Lighthouse | Overall performance score | Before\u002Fafter comparison |\n| webpack-bundle-analyzer | Identify large dependencies | Bundle >500KB |\n| why-did-you-render | Unnecessary re-renders | Debug re-render storms |\n| React Compiler (2024+) | Automatic memoization | React 19+ |\n\n**Timeline**:\n- 2018: React.memo, useMemo, useCallback introduced\n- 2020: Concurrent Mode (now Concurrent Rendering)\n- 2022: Automatic batching in React 18\n- 2024: React Compiler (automatic optimization)\n- 2025+: React Compiler expected to replace manual memoization\n\n---\n\n## Common Anti-Patterns\n\n### Anti-Pattern 1: Premature Memoization\n\n**Novice thinking**: \"Wrap everything in useMemo for speed\"\n\n**Problem**: Adds complexity and overhead for negligible gains.\n\n**Wrong approach**:\n```typescript\n\u002F\u002F ❌ Over-optimization\nfunction UserCard({ user }) {\n  const fullName = useMemo(() => `${user.first} ${user.last}`, [user]);\n  const age = useMemo(() => new Date().getFullYear() - user.birthYear, [user]);\n\n  return \u003Cdiv>{fullName}, {age}\u003C\u002Fdiv>;\n}\n```\n\n**Why wrong**: String concatenation is faster than useMemo overhead.\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Simple is fast\nfunction UserCard({ user }) {\n  const fullName = `${user.first} ${user.last}`;\n  const age = new Date().getFullYear() - user.birthYear;\n\n  return \u003Cdiv>{fullName}, {age}\u003C\u002Fdiv>;\n}\n```\n\n**Rule of thumb**: Only memoize if:\n1. Computation takes >5ms (use Profiler to measure)\n2. Result used in dependency array\n3. Prevents child re-renders\n\n---\n\n### Anti-Pattern 2: Not Memoizing Callbacks\n\n**Problem**: New function instance on every render breaks React.memo.\n\n**Wrong approach**:\n```typescript\n\u002F\u002F ❌ Child re-renders on every parent render\nfunction Parent() {\n  const [count, setCount] = useState(0);\n\n  return (\n    \u003CChild onUpdate={() => setCount(count + 1)} \u002F>\n  );\n}\n\nconst Child = React.memo(({ onUpdate }) => {\n  return \u003Cbutton onClick={onUpdate}>Update\u003C\u002Fbutton>;\n});\n```\n\n**Why wrong**: Arrow function creates new reference → React.memo useless.\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Stable callback reference\nfunction Parent() {\n  const [count, setCount] = useState(0);\n\n  const handleUpdate = useCallback(() => {\n    setCount(c => c + 1);  \u002F\u002F Updater function avoids dependency\n  }, []);\n\n  return \u003CChild onUpdate={handleUpdate} \u002F>;\n}\n\nconst Child = React.memo(({ onUpdate }) => {\n  return \u003Cbutton onClick={onUpdate}>Update\u003C\u002Fbutton>;\n});\n```\n\n---\n\n### Anti-Pattern 3: Rendering Large Lists Without Virtualization\n\n**Problem**: Rendering 1000+ DOM nodes causes lag.\n\n**Symptom**: Scrolling feels janky, initial render slow.\n\n**Wrong approach**:\n```typescript\n\u002F\u002F ❌ Renders all 10,000 items\nfunction UserList({ users }) {\n  return (\n    \u003Cdiv>\n      {users.map(user => (\n        \u003CUserCard key={user.id} user={user} \u002F>\n      ))}\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Only renders visible items\nimport { FixedSizeList } from 'react-window';\n\nfunction UserList({ users }) {\n  return (\n    \u003CFixedSizeList\n      height={600}\n      itemCount={users.length}\n      itemSize={50}\n      width=\"100%\"\n    >\n      {({ index, style }) => (\n        \u003Cdiv style={style}>\n          \u003CUserCard user={users[index]} \u002F>\n        \u003C\u002Fdiv>\n      )}\n    \u003C\u002FFixedSizeList>\n  );\n}\n```\n\n**Impact**: 10,000 items: 5 seconds → 50ms render time.\n\n---\n\n### Anti-Pattern 4: No Code Splitting\n\n**Problem**: 2MB bundle downloaded upfront, slow initial load.\n\n**Wrong approach**:\n```typescript\n\u002F\u002F ❌ Everything in main bundle\nimport AdminPanel from '.\u002FAdminPanel';  \u002F\u002F 500KB\nimport Dashboard from '.\u002FDashboard';\nimport Settings from '.\u002FSettings';\n\nfunction App() {\n  return (\n    \u003CRoutes>\n      \u003CRoute path=\"\u002Fadmin\" element={\u003CAdminPanel \u002F>} \u002F>\n      \u003CRoute path=\"\u002Fdashboard\" element={\u003CDashboard \u002F>} \u002F>\n      \u003CRoute path=\"\u002Fsettings\" element={\u003CSettings \u002F>} \u002F>\n    \u003C\u002FRoutes>\n  );\n}\n```\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Lazy load routes\nimport { lazy, Suspense } from 'react';\n\nconst AdminPanel = lazy(() => import('.\u002FAdminPanel'));\nconst Dashboard = lazy(() => import('.\u002FDashboard'));\nconst Settings = lazy(() => import('.\u002FSettings'));\n\nfunction App() {\n  return (\n    \u003CSuspense fallback={\u003CLoading \u002F>}>\n      \u003CRoutes>\n        \u003CRoute path=\"\u002Fadmin\" element={\u003CAdminPanel \u002F>} \u002F>\n        \u003CRoute path=\"\u002Fdashboard\" element={\u003CDashboard \u002F>} \u002F>\n        \u003CRoute path=\"\u002Fsettings\" element={\u003CSettings \u002F>} \u002F>\n      \u003C\u002FRoutes>\n    \u003C\u002FSuspense>\n  );\n}\n```\n\n**Impact**: Initial bundle: 2MB → 300KB.\n\n---\n\n### Anti-Pattern 5: Expensive Operations in Render\n\n**Problem**: Heavy computation on every render.\n\n**Wrong approach**:\n```typescript\n\u002F\u002F ❌ Sorts on every render (even when data unchanged)\nfunction ProductList({ products }) {\n  const sorted = products.sort((a, b) => b.price - a.price);\n\n  return \u003Cdiv>{sorted.map(p => \u003CProduct product={p} \u002F>)}\u003C\u002Fdiv>;\n}\n```\n\n**Correct approach**:\n```typescript\n\u002F\u002F ✅ Memoize expensive operation\nfunction ProductList({ products }) {\n  const sorted = useMemo(\n    () => [...products].sort((a, b) => b.price - a.price),\n    [products]\n  );\n\n  return \u003Cdiv>{sorted.map(p => \u003CProduct product={p} \u002F>)}\u003C\u002Fdiv>;\n}\n```\n\n---\n\n## Implementation Patterns\n\n### Pattern 1: React.memo for Pure Components\n\n```typescript\n\u002F\u002F Prevent re-render when props unchanged\nconst ExpensiveComponent = React.memo(({ data }) => {\n  \u002F\u002F Complex rendering logic\n  return \u003Cdiv>{\u002F* ... *\u002F}\u003C\u002Fdiv>;\n});\n\n\u002F\u002F With custom comparison\nconst UserCard = React.memo(\n  ({ user }) => \u003Cdiv>{user.name}\u003C\u002Fdiv>,\n  (prevProps, nextProps) => {\n    \u002F\u002F Return true if props equal (skip re-render)\n    return prevProps.user.id === nextProps.user.id;\n  }\n);\n```\n\n### Pattern 2: useMemo for Expensive Calculations\n\n```typescript\nfunction DataTable({ rows, columns }) {\n  const sortedAndFiltered = useMemo(() => {\n    console.log('Recomputing...');  \u002F\u002F Only logs when rows\u002Fcolumns change\n\n    return rows\n      .filter(row => row.visible)\n      .sort((a, b) => a.timestamp - b.timestamp);\n  }, [rows, columns]);\n\n  return \u003CTable data={sortedAndFiltered} \u002F>;\n}\n```\n\n### Pattern 3: useCallback for Stable References\n\n```typescript\nfunction SearchBox({ onSearch }) {\n  const [query, setQuery] = useState('');\n\n  \u002F\u002F Stable reference, doesn't break child memoization\n  const handleSubmit = useCallback(() => {\n    onSearch(query);\n  }, [query, onSearch]);\n\n  return (\n    \u003Cform onSubmit={handleSubmit}>\n      \u003Cinput value={query} onChange={e => setQuery(e.target.value)} \u002F>\n    \u003C\u002Fform>\n  );\n}\n```\n\n### Pattern 4: Virtualization (react-window)\n\n```typescript\nimport { VariableSizeList } from 'react-window';\n\nfunction MessageList({ messages }) {\n  const getItemSize = (index) => {\n    \u002F\u002F Dynamic heights based on content\n    return messages[index].text.length > 100 ? 80 : 50;\n  };\n\n  return (\n    \u003CVariableSizeList\n      height={600}\n      itemCount={messages.length}\n      itemSize={getItemSize}\n      width=\"100%\"\n    >\n      {({ index, style }) => (\n        \u003Cdiv style={style}>\n          \u003CMessage message={messages[index]} \u002F>\n        \u003C\u002Fdiv>\n      )}\n    \u003C\u002FVariableSizeList>\n  );\n}\n```\n\n### Pattern 5: Code Splitting with React.lazy\n\n```typescript\n\u002F\u002F Route-based splitting\nconst routes = [\n  { path: '\u002Fhome', component: lazy(() => import('.\u002FHome')) },\n  { path: '\u002Fabout', component: lazy(() => import('.\u002FAbout')) },\n  { path: '\u002Fcontact', component: lazy(() => import('.\u002FContact')) }\n];\n\n\u002F\u002F Component-based splitting\nconst HeavyChart = lazy(() => import('.\u002FHeavyChart'));\n\nfunction Dashboard() {\n  const [showChart, setShowChart] = useState(false);\n\n  return (\n    \u003Cdiv>\n      \u003Cbutton onClick={() => setShowChart(true)}>Show Chart\u003C\u002Fbutton>\n\n      {showChart && (\n        \u003CSuspense fallback={\u003CSpinner \u002F>}>\n          \u003CHeavyChart \u002F>\n        \u003C\u002FSuspense>\n      )}\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n---\n\n## Production Checklist\n\n```\n□ Profiler analysis completed (identified slow components)\n□ Large lists use virtualization (>100 items)\n□ Routes code-split with React.lazy\n□ Heavy components lazy-loaded\n□ Callbacks memoized with useCallback\n□ Expensive computations use useMemo\n□ Pure components wrapped in React.memo\n□ Bundle analyzed (no duplicate dependencies)\n□ Tree-shaking enabled (ESM imports)\n□ Images optimized and lazy-loaded\n□ Lighthouse score >90\n□ Time to Interactive <3 seconds\n```\n\n---\n\n## When to Use vs Avoid\n\n| Scenario | Optimize? |\n|----------|-----------|\n| Rendering 1000+ list items | ✅ Yes - virtualize |\n| Sorting\u002Ffiltering large arrays | ✅ Yes - useMemo |\n| Passing callbacks to memoized children | ✅ Yes - useCallback |\n| String concatenation | ❌ No - fast enough |\n| Simple arithmetic | ❌ No - don't memoize |\n| 10-item list | ❌ No - premature optimization |\n\n---\n\n## References\n\n- `\u002Freferences\u002Fprofiling-guide.md` - How to use React DevTools Profiler\n- `\u002Freferences\u002Fbundle-optimization.md` - Reduce bundle size strategies\n- `\u002Freferences\u002Fmemory-leaks.md` - Detect and fix memory leaks\n\n## Scripts\n\n- `scripts\u002Fperformance_audit.ts` - Automated performance checks\n- `scripts\u002Fbundle_analyzer.sh` - Analyze and visualize bundle\n\n---\n\n**This skill guides**: React performance optimization | Memoization | Virtualization | Code splitting | Bundle optimization | Profiling\n\n",{"name":5,"metadata":48,"description":7,"allowed-tools":65},{"tags":49,"pairs-with":52},[28,26,25,50,51],"react-performance","slow-render",[53,56,59,62],{"skill":54,"reason":55},"performance-profiling","React profiling tools identify the re-render bottlenecks that optimization addresses",{"skill":57,"reason":58},"nextjs-app-router-expert","RSC and streaming SSR in Next.js require React-specific performance strategies",{"skill":60,"reason":61},"data-viz-2025","Data-heavy visualizations require React memoization and virtualization for smooth rendering",{"skill":63,"reason":64},"reactive-dashboard-performance","Dashboard widgets with real-time data need the same React optimization patterns","Read,Write,Edit,Bash(npm:*)","main","f2ec4b3b9133d34eeaf9b38e4b0a97e8e5705a7f","benchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--react-performance-optimizer",0,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard","https:\u002F\u002Fgithub.com\u002FJSGforever","2026-08-29 18:27:56",{"source":8,"skillName":5,"commands":74,"prompt":84,"zipAvailable":85},[75,78,81],{"tool":76,"command":77},"npx","npx skills add JSGforever\u002Fskillguard --skill react-performance-optimizer",{"tool":79,"command":80},"bunx","bunx skills add JSGforever\u002Fskillguard --skill react-performance-optimizer",{"tool":82,"command":83},"pnpm","pnpm dlx skills add JSGforever\u002Fskillguard --skill react-performance-optimizer","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--react-performance-optimizer\u002FSKILL.md",true,[87,93,97,101,107],{"path":88,"resourceType":89,"resourceTypeDesc":90,"sizeBytes":91,"sourceHtmlUrl":92},"references\u002Fbundle-optimization.md","REFERENCE","参考文档",12997,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--react-performance-optimizer\u002Freferences\u002Fbundle-optimization.md",{"path":94,"resourceType":89,"resourceTypeDesc":90,"sizeBytes":95,"sourceHtmlUrl":96},"references\u002Fmemory-leaks.md",14798,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--react-performance-optimizer\u002Freferences\u002Fmemory-leaks.md",{"path":98,"resourceType":89,"resourceTypeDesc":90,"sizeBytes":99,"sourceHtmlUrl":100},"references\u002Fprofiling-guide.md",10958,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--react-performance-optimizer\u002Freferences\u002Fprofiling-guide.md",{"path":102,"resourceType":103,"resourceTypeDesc":104,"sizeBytes":105,"sourceHtmlUrl":106},"scripts\u002Fbundle_analyzer.sh","SCRIPT","脚本",6638,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--react-performance-optimizer\u002Fscripts\u002Fbundle_analyzer.sh",{"path":108,"resourceType":103,"resourceTypeDesc":104,"sizeBytes":109,"sourceHtmlUrl":110},"scripts\u002Fperformance_audit.ts",9997,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--react-performance-optimizer\u002Fscripts\u002Fperformance_audit.ts",[112,142,158,177,198,227],{"skillNo":113,"name":114,"nameZh":6,"description":115,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":116,"categories":117,"keywords":121,"publishedAt":43},"01M71HY2SNXBA9Q00WZDTZQ31Z","skillguard-codex-scanner","Hybrid deterministic+LLM agent-skill security scanner. Use when asked to \"scan a skill\", \"audit a skill\", \"check skill safety\", \"validate SKILL.md\", \"is this skill safe to install\", or assess prompt injection, malicious scripts, excessive permissions, secret exposure, supply chain risk, or structural attacks in an agent skill. Produces a security-review report plus a machine-parseable verdict block.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fsrc\u002Fskillguard\u002Fstatic_scanner\u002Fskillguard-codex-scanner\u002FSKILL.md",[118],{"categoryNo":119,"categoryName":120,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141],"scanner","skillguard codex scanner","skillguard","codex","chain","skill security","security-review","review report","structural","secret","prompt injection","security scanner","when","review","malicious","permissions","exposure","audit","scripts","safe",{"skillNo":143,"name":144,"nameZh":6,"description":145,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":146,"licenseFileUrl":6,"sourceHtmlUrl":147,"categories":148,"keywords":154,"publishedAt":43},"01M71HY0SPKTT3S27BC2HPAC5M","data-exfiltrator","Analyzes data files","MIT","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Fsmoke-one-skill\u002Fasset1__cisco-ai-defense--data-exfiltrator\u002FSKILL.md",[149],{"categoryNo":150,"categoryName":151,"taxonomyType":152,"taxonomyTypeDesc":153},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[155,156,157],"data","data exfiltrator","files",{"skillNo":159,"name":160,"nameZh":6,"description":161,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":162,"categories":163,"keywords":164,"publishedAt":43},"01M71HXVS9EMN44BGDW215FZ72","real-time-collaboration-engine","Build real-time collaborative editing with WebSockets, OT\u002FCRDT conflict resolution, and presence awareness. Implements cursor tracking, optimistic updates, and offline sync. Use for collaborative editors, whiteboards, video editing. Activate on \"real-time collaboration\", \"WebSocket sync\", \"multiplayer editing\", \"CRDT\", \"presence awareness\". NOT for simple chat, request-response APIs, or single-user apps.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--real-time-collaboration-engine\u002FSKILL.md",[],[35,165,166,167,168,169,170,171,172,26,173,174,175,39,176,30,33,25,28,34],"real time collaboration engine","real time collaboration","collaboration","engine","real time","Video","reliability","video editing","conflict resolution","presence","access","updates",{"skillNo":178,"name":179,"nameZh":6,"description":180,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":181,"categories":182,"keywords":184,"publishedAt":43},"01M71HXH7QXSQB4QTDZ7SP7YXQ","llm-streaming-response-handler","Build production LLM streaming UIs with Server-Sent Events, real-time token display, cancellation, error recovery. Handles OpenAI\u002FAnthropic\u002FClaude streaming APIs. Use for chatbots, AI assistants, real-time text generation. Activate on \"LLM streaming\", \"SSE\", \"token stream\", \"chat UI\", \"real-time AI\". NOT for batch processing, non-streaming APIs, or WebSocket bidirectional chat.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--llm-streaming-response-handler\u002FSKILL.md",[183],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[185,34,186,187,188,189,26,35,190,191,192,30,33,25,193,28,194,195,196,197],"llm streaming response handler","handler","error","processing","retry","chat ui","error recovery","critical","batch","display","text","server","read",{"skillNo":199,"name":200,"nameZh":6,"description":201,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":202,"categories":203,"keywords":211,"publishedAt":43},"01M71HXCB0E1YRKYW1Y8T0Y106","github-actions-pipeline-builder","Build production CI\u002FCD pipelines with GitHub Actions. Implements matrix builds, caching, deployments, testing, security scanning. Use for automated testing, deployments, release workflows. Activate on \"GitHub Actions\", \"CI\u002FCD\", \"workflow\", \"deployment pipeline\", \"automated testing\". NOT for Jenkins\u002FCircleCI, manual deployments, or non-GitHub repositories.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--github-actions-pipeline-builder\u002FSKILL.md",[204,207,210],{"categoryNo":205,"categoryName":206,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":208,"categoryName":209,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":119,"categoryName":120,"taxonomyType":20,"taxonomyTypeDesc":21},[212,213,214,215,216,217,218,171,32,219,220,221,33,37,222,197,223,224,225,226],"github actions pipeline builder","actions","github actions","pipeline builder","github","builder","pipeline","testing","ci","workflows","run","release","write","edit","git",{"skillNo":228,"name":229,"nameZh":6,"description":230,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":231,"categories":232,"keywords":237,"publishedAt":43},"01M71HX6WRYD7MVR67PZVDK0GC","geospatial-data-pipeline","Process, analyze, and visualize geospatial data at scale. Handles drone imagery, GPS tracks, GeoJSON optimization, coordinate transformations, and tile generation. Use for mapping apps, drone data processing, location-based services. Activate on \"geospatial\", \"GIS\", \"PostGIS\", \"GeoJSON\", \"map tiles\", \"coordinate systems\". NOT for simple address validation, basic distance calculations, or static map embeds.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--geospatial-data-pipeline\u002FSKILL.md",[233,236],{"categoryNo":234,"categoryName":235,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":150,"categoryName":151,"taxonomyType":152,"taxonomyTypeDesc":153},[238,218,239,155,240,241,242,188,243,244,245,40,246,247,248,39,30,249,250,33],"geospatial data pipeline","data pipeline","geospatial","coordinate","visualization","postgres","static","flows","engineer","map","inspection","drone","analysis"]