{"id":"18876579-35e0-4aee-8040-01bc6474a77c","shortId":"w9A5Dk","kind":"skill","title":"react-component-performance","tagline":"Diagnose slow React components and suggest targeted performance fixes.","description":"# React Component Performance\n\n## Overview\n\nIdentify render hotspots, isolate expensive updates, and apply targeted optimizations without changing UI behavior.\n\n## When to Use\n- When the user asks to profile or improve a slow React component.\n- When you need to reduce re-renders, list lag, or expensive render work in React UI.\n\n## Workflow\n\n1. Reproduce or describe the slowdown.\n2. Identify what triggers re-renders (state updates, props churn, effects).\n3. Isolate fast-changing state from heavy subtrees.\n4. Stabilize props and handlers; memoize where it pays off.\n5. Reduce expensive work (computation, DOM size, list length).\n6. **Validate**: open React DevTools Profiler → record the interaction → inspect the Flamegraph for components rendering longer than ~16 ms → compare against a pre-optimization baseline recording.\n\n## Checklist\n\n- Measure: use React DevTools Profiler or log renders; capture baseline.\n- Find churn: identify state updated on a timer, scroll, input, or animation.\n- Split: move ticking state into a child; keep heavy lists static.\n- Memoize: wrap leaf rows with `memo` only when props are stable.\n- Stabilize props: use `useCallback`/`useMemo` for handlers and derived values.\n- Avoid derived work in render: precompute, or compute inside memoized helpers.\n- Control list size: window/virtualize long lists; avoid rendering hidden items.\n- Keys: ensure stable keys; avoid index when order can change.\n- Effects: verify dependency arrays; avoid effects that re-run on every render.\n- Style/layout: watch for expensive layout thrash or large Markdown/diff renders.\n\n## Optimization Patterns\n\n### Isolate ticking state\n\nMove a timer or animation counter into a child so the parent list never re-renders on each tick.\n\n```tsx\n// ❌ Before – entire parent (and list) re-renders every second\nfunction Dashboard({ items }: { items: Item[] }) {\n  const [tick, setTick] = useState(0);\n  useEffect(() => {\n    const id = setInterval(() => setTick(t => t + 1), 1000);\n    return () => clearInterval(id);\n  }, []);\n  return (\n    <>\n      <Clock tick={tick} />\n      <ExpensiveList items={items} /> {/* re-renders every second */}\n    </>\n  );\n}\n\n// ✅ After – only <Clock> re-renders; list is untouched\nfunction Clock() {\n  const [tick, setTick] = useState(0);\n  useEffect(() => {\n    const id = setInterval(() => setTick(t => t + 1), 1000);\n    return () => clearInterval(id);\n  }, []);\n  return <span>{tick}s</span>;\n}\n\nfunction Dashboard({ items }: { items: Item[] }) {\n  return (\n    <>\n      <Clock />\n      <ExpensiveList items={items} />\n    </>\n  );\n}\n```\n\n### Stabilize callbacks with `useCallback` + `memo`\n\n```tsx\n// ❌ Before – new handler reference on every render busts Row memo\nfunction List({ items }: { items: Item[] }) {\n  const handleClick = (id: string) => console.log(id); // new ref each render\n  return items.map(item => <Row key={item.id} item={item} onClick={handleClick} />);\n}\n\n// ✅ After – stable handler; Row only re-renders when its own item changes\nconst Row = memo(({ item, onClick }: RowProps) => (\n  <li onClick={() => onClick(item.id)}>{item.name}</li>\n));\n\nfunction List({ items }: { items: Item[] }) {\n  const handleClick = useCallback((id: string) => console.log(id), []);\n  return items.map(item => <Row key={item.id} item={item} onClick={handleClick} />);\n}\n```\n\n### Prefer derived data outside render\n\n```tsx\n// ❌ Before – recomputes on every render\nfunction Summary({ orders }: { orders: Order[] }) {\n  const total = orders.reduce((sum, o) => sum + o.amount, 0); // runs every render\n  return <p>Total: {total}</p>;\n}\n\n// ✅ After – recomputes only when orders changes\nfunction Summary({ orders }: { orders: Order[] }) {\n  const total = useMemo(() => orders.reduce((sum, o) => sum + o.amount, 0), [orders]);\n  return <p>Total: {total}</p>;\n}\n```\n\n### Additional patterns\n\n- **Split rows**: extract list rows into memoized components with narrow props.\n- **Defer heavy rendering**: lazy-render or collapse expensive content until expanded.\n\n## Profiling Validation Steps\n\n1. Open **React DevTools → Profiler** tab.\n2. Click **Record**, perform the slow interaction, then **Stop**.\n3. Switch to **Flamegraph** view; any bar labeled with a component and time > ~16 ms is a candidate.\n4. Use **Ranked chart** to sort by self render time and target the top offenders.\n5. Apply one optimization at a time, re-record, and compare render counts and durations against the baseline.\n\n## Example Reference\n\nLoad `references/examples.md` when the user wants a concrete refactor example.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["react","component","performance","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding"],"capabilities":["skill","source-sickn33","skill-react-component-performance","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/react-component-performance","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34616 github stars · SKILL.md body (4,852 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-23T00:51:27.993Z","embedding":null,"createdAt":"2026-04-18T21:43:17.295Z","updatedAt":"2026-04-23T00:51:27.993Z","lastSeenAt":"2026-04-23T00:51:27.993Z","tsv":"'0':292,331,466,492 '1':65,300,339,525 '1000':301,340 '16':128,553 '2':71,531 '3':83,540 '4':92,558 '5':102,573 '6':111 'addit':497 'anim':160,256 'appli':25,574 'array':227 'ask':38,637 'avoid':193,210,218,228 'bar':546 'baselin':136,148,591 'behavior':31 'boundari':645 'bust':369 'callback':357 'candid':557 'captur':147 'chang':29,87,223,409,478 'chart':561 'checklist':138 'child':167,260 'churn':81,150 'clarif':639 'clear':612 'clearinterv':303,342 'click':532 'clock':306,326 'collaps':517 'compar':130,584 'compon':3,8,15,46,124,506,550 'comput':106,200 'concret':601 'console.log':381,431 'const':288,294,327,333,377,410,426,459,484 'content':519 'control':204 'count':586 'counter':257 'criteria':648 'dashboard':284,348 'data':445 'defer':510 'depend':226 'deriv':191,194,444 'describ':68,616 'devtool':115,142,528 'diagnos':5 'dom':107 'durat':588 'effect':82,224,229 'ensur':215 'entir':274 'environ':628 'environment-specif':627 'everi':235,281,315,367,452,468 'exampl':592,603 'expand':521 'expens':22,58,104,240,518 'expensivelist':309,353 'expert':633 'extract':501 'fast':86 'fast-chang':85 'find':149 'fix':13 'flamegraph':122,543 'function':283,325,347,372,421,454,479 'handleclick':378,396,427,442 'handler':96,189,364,399 'heavi':90,169,511 'helper':203 'hidden':212 'hotspot':20 'id':295,304,334,343,379,382,429,432 'identifi':18,72,151 'improv':42 'index':219 'input':158,642 'insid':201 'inspect':120 'interact':119,537 'isol':21,84,249 'item':213,285,286,287,310,311,349,350,351,354,355,374,375,376,389,393,394,408,413,423,424,425,435,439,440 'item.id':392,419,438 'item.name':420 'items.map':388,434 'keep':168 'key':214,217,391,437 'label':547 'lag':56 'larg':244 'layout':241 'lazi':514 'lazy-rend':513 'leaf':174 'length':110 'li':416 'limit':604 'list':55,109,170,205,209,264,277,322,373,422,502 'load':594 'log':145 'long':208 'longer':126 'markdown/diff':245 'match':613 'measur':139 'memo':177,360,371,412 'memoiz':97,172,202,505 'miss':650 'move':162,252 'ms':129,554 'narrow':508 'need':49 'never':265 'new':363,383 'o':463,489 'o.amount':465,491 'offend':572 'onclick':395,414,417,418,441 'one':575 'open':113,526 'optim':27,135,247,576 'order':221,456,457,458,477,481,482,483,493 'orders.reduce':461,487 'output':622 'outsid':446 'overview':17 'parent':263,275 'pattern':248,498 'pay':100 'perform':4,12,16,534 'permiss':643 'pre':134 'pre-optim':133 'precomput':198 'prefer':443 'profil':40,116,143,522,529 'prop':80,94,180,184,509 'rank':560 're':53,76,232,267,279,313,320,403,581 're-record':580 're-rend':52,75,266,278,312,319,402 're-run':231 'react':2,7,14,45,62,114,141,527 'react-component-perform':1 'recomput':450,474 'record':117,137,533,582 'reduc':51,103 'ref':384 'refactor':602 'refer':365,593 'references/examples.md':595 'render':19,54,59,77,125,146,197,211,236,246,268,280,314,321,368,386,404,447,453,469,512,515,566,585 'reproduc':66 'requir':641 'return':302,305,341,344,352,387,433,470,494 'review':634 'row':175,370,390,400,411,436,500,503 'rowprop':415 'run':233,467 'safeti':644 'scope':615 'scroll':157 'second':282,316 'self':565 'setinterv':296,335 'settick':290,297,329,336 'size':108,206 'skill':607 'skill-react-component-performance' 'slow':6,44,536 'slowdown':70 'sort':563 'source-sickn33' 'specif':629 'split':161,499 'stabil':93,183,356 'stabl':182,216,398 'state':78,88,152,164,251 'static':171 'step':524 'stop':539,635 'string':380,430 'style/layout':237 'substitut':625 'subtre':91 'success':647 'suggest':10 'sum':462,464,488,490 'summari':455,480 'switch':541 'tab':530 'target':11,26,569 'task':611 'test':631 'thrash':242 'tick':163,250,271,289,307,308,328,345 'time':552,567,579 'timer':156,254 'top':571 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'total':460,471,472,485,495,496 'treat':620 'trigger':74 'tsx':272,361,448 'ui':30,63 'untouch':324 'updat':23,79,153 'use':34,140,185,559,605 'usecallback':186,359,428 'useeffect':293,332 'usememo':187,486 'user':37,598 'usest':291,330 'valid':112,523,630 'valu':192 'verifi':225 'view':544 'want':599 'watch':238 'window/virtualize':207 'without':28 'work':60,105,195 'workflow':64 'wrap':173","prices":[{"id":"04da508e-4e90-472b-bc0e-acdd3ab3192c","listingId":"18876579-35e0-4aee-8040-01bc6474a77c","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:43:17.295Z"}],"sources":[{"listingId":"18876579-35e0-4aee-8040-01bc6474a77c","source":"github","sourceId":"sickn33/antigravity-awesome-skills/react-component-performance","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-component-performance","isPrimary":false,"firstSeenAt":"2026-04-18T21:43:17.295Z","lastSeenAt":"2026-04-23T00:51:27.993Z"}],"details":{"listingId":"18876579-35e0-4aee-8040-01bc6474a77c","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"react-component-performance","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34616,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"9836b7696ce6d477cab62d3024d8a40747a4b3a1","skill_md_path":"skills/react-component-performance/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-component-performance"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"react-component-performance","description":"Diagnose slow React components and suggest targeted performance fixes."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/react-component-performance"},"updatedAt":"2026-04-23T00:51:27.993Z"}}