[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-3e3091ed-1e37-4459-a2d7-638dd3aceb15":3,"$f1aMdEEdbOgEUwZsIGyFyxk9laasSAoYSIElHr4z70pc":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"3e3091ed-1e37-4459-a2d7-638dd3aceb15","react-component-performance","诊断缓慢的React组件并建议针对性的性能修复。","cat_coding_frontend","mod_coding","sickn33,coding","---\nname: react-component-performance\ndescription: Diagnose slow React components and suggest targeted performance fixes.\nrisk: safe\nsource: \"Dimillian\u002FSkills (MIT)\"\ndate_added: \"2026-03-25\"\n---\n\n# 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`\u002F`useMemo` for handlers and derived values.\n- Avoid derived work in render: precompute, or compute inside memoized helpers.\n- Control list size: window\u002Fvirtualize 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\u002Flayout: watch for expensive layout thrash or large Markdown\u002Fdiff 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\u002F\u002F ❌ 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    \u003C>\n      \u003CClock tick={tick} \u002F>\n      \u003CExpensiveList items={items} \u002F> {\u002F* re-renders every second *\u002F}\n    \u003C\u002F>\n  );\n}\n\n\u002F\u002F ✅ After – only \u003CClock> 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 \u003Cspan>{tick}s\u003C\u002Fspan>;\n}\n\nfunction Dashboard({ items }: { items: Item[] }) {\n  return (\n    \u003C>\n      \u003CClock \u002F>\n      \u003CExpensiveList items={items} \u002F>\n    \u003C\u002F>\n  );\n}\n```\n\n### Stabilize callbacks with `useCallback` + `memo`\n\n```tsx\n\u002F\u002F ❌ Before – new handler reference on every render busts Row memo\nfunction List({ items }: { items: Item[] }) {\n  const handleClick = (id: string) => console.log(id); \u002F\u002F new ref each render\n  return items.map(item => \u003CRow key={item.id} item={item} onClick={handleClick} \u002F>);\n}\n\n\u002F\u002F ✅ After – stable handler; Row only re-renders when its own item changes\nconst Row = memo(({ item, onClick }: RowProps) => (\n  \u003Cli onClick={() => onClick(item.id)}>{item.name}\u003C\u002Fli>\n));\n\nfunction List({ items }: { items: Item[] }) {\n  const handleClick = useCallback((id: string) => console.log(id), []);\n  return items.map(item => \u003CRow key={item.id} item={item} onClick={handleClick} \u002F>);\n}\n```\n\n### Prefer derived data outside render\n\n```tsx\n\u002F\u002F ❌ Before – recomputes on every render\nfunction Summary({ orders }: { orders: Order[] }) {\n  const total = orders.reduce((sum, o) => sum + o.amount, 0); \u002F\u002F runs every render\n  return \u003Cp>Total: {total}\u003C\u002Fp>;\n}\n\n\u002F\u002F ✅ 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 \u003Cp>Total: {total}\u003C\u002Fp>;\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\u002Fexamples.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.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,204,882,"2026-05-16 13:36:20",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"编程开发","coding","mdi-code-braces","代码生成、调试、审查，提升开发效率",2,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"前端开发","frontend","mdi-language-html5","HTML\u002FCSS\u002FJavaScript\u002F框架相关",1,96,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"ca4c7076-f1e5-46f0-a1be-a492c50cca0c","1.0.0","react-component-performance.zip",3450,"uploads\u002Fskills\u002F3e3091ed-1e37-4459-a2d7-638dd3aceb15\u002Freact-component-performance.zip","94215286ba0e992980f024828d259598dcbc20e9106e4d7c560ae511974f6298","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":5081},{\"path\":\"agents\u002Fopenai.yaml\",\"isDirectory\":false,\"size\":238},{\"path\":\"references\u002Fexamples.md\",\"isDirectory\":false,\"size\":2381}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]