[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EBSP6H435JS2G2YC851J7S":3,"skill-same:01M6EBSP6H435JS2G2YC851J7S":88},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":38,"linkOnly":39,"markdownContent":40,"markdownBody":41,"frontMatter":42,"refName":43,"commitSha":44,"skillDirectory":45,"forksCount":46,"repositoryHtmlUrl":47,"repositoryHomepageUrl":48,"ownerHtmlUrl":49,"ownerBlogUrl":6,"ownerDescription":50,"updatedAt":51,"install":52,"resources":65},"01M6EBSP6H435JS2G2YC851J7S","react-performance",null,"Optimization strategies for React applications (Client & Server). Use when optimizing React rendering performance, reducing re-renders, or improving bundle size. (triggers: **\u002F*.tsx, **\u002F*.jsx, waterfall, bundle, lazy, suspense, dynamic)","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FHoangNguyen0403\u002Fagent-skills-standard\u002Freact-performance\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37],"performance","react","react performance","server","Optimization","applications","bundle size","use","tsx","strategies","triggers","bundle","client","rendering","2026-11-10 10:12:30",false,"---\nname: react-performance\ndescription: 'Optimization strategies for React applications (Client & Server). Use when optimizing React rendering performance, reducing re-renders, or improving bundle size. (triggers: **\u002F*.tsx, **\u002F*.jsx, waterfall, bundle, lazy, suspense, dynamic)'\n---\n\n# React Performance\n\n## **Priority: P0 (CRITICAL)**\n\nStrategies to minimize waterfalls, bundle size, and render cost.\n\n## Elimination of Waterfalls (P0)\n\n- **Parallel Data**: Use **`Promise.all([getUser(), getProducts(), ...])`** for independent fetches. Avoid **sequential awaits** (Request Waterfalls).\n- **Preload**: Start fetches before render (in event handlers or **route loaders**).\n- **Suspense**: Use **Suspense boundaries** to stream partial content and show partial content early.\n\n## Bundle Optimization (P0)\n\n- **No Barrel Files**: **Avoid barrel files** (importing from index.ts); import directly from component files to improve tree-shaking.\n- **Lazy Load**: Use **`React.lazy`** or **`next\u002Fdynamic`** for heavy components like **Charts**, **Modals**, or large libraries.\n- **Dependency Reduction**: **Replace moment with dayjs** or **lodash with native\u002Fradash** to drop bytes. Use **`source-map-explorer`** or **`bundle-visualizer`** to find bloat.\n\n## Rendering & Re-renders (P1)\n\n- **Isolation**: Move state as close to its usage as possible. Isolate heavy UI updates.\n- **List Performance**: Use **`react-window`** or **`react-virtual`** for **virtualization** of lists with 500+ items. Wrap list items in **`React.memo`**.\n- **Context Splitting**: **Split Context** into `State` and `Dispatch` objects. This prevents all consumers from re-rendering when only a setter is needed.\n- **Stability**: Use **`useMemo` for derived list data** and passing stable object\u002Farray references to children.\n- **Content Visibility**: `content-visibility: auto` for off-screen CSS content.\n- **Static Hoisting**: Extract static objects\u002FJSX outside component scope.\n- **Transitions**: `startTransition` for non-urgent UI updates.\n\n## Parallelization (P1)\n\n- **Web Workers**: Move heavy computation (Encryption, Image processing, Large Data Sorting) off the main thread using `Comlink` or `Worker`.\n\n## Server Performance (RSC) (P1)\n\n- **Caching**: `React.cache` for per-request deduplication.\n- **Serialization**: Minimize props passing to Client Components (only IDs\u002Fprimitives).\n\n## Anti-Patterns\n\n- **No `export *`**: Breaks tree-shaking.\n- **No Sequential Await**: Causes waterfalls.\n- **No Inline Objects**: `style={{}}` breaks strict equality checks (if memoized).\n- **No Heavy Libs**: Avoid moment\u002Flodash (use dayjs\u002Fradash).\n\n## References\n\nSee [references\u002FREFERENCE.md](references\u002FREFERENCE.md) for Profiler usage, bundle analysis, Web Workers, and debounce patterns.\n\n","# React Performance\n\n## **Priority: P0 (CRITICAL)**\n\nStrategies to minimize waterfalls, bundle size, and render cost.\n\n## Elimination of Waterfalls (P0)\n\n- **Parallel Data**: Use **`Promise.all([getUser(), getProducts(), ...])`** for independent fetches. Avoid **sequential awaits** (Request Waterfalls).\n- **Preload**: Start fetches before render (in event handlers or **route loaders**).\n- **Suspense**: Use **Suspense boundaries** to stream partial content and show partial content early.\n\n## Bundle Optimization (P0)\n\n- **No Barrel Files**: **Avoid barrel files** (importing from index.ts); import directly from component files to improve tree-shaking.\n- **Lazy Load**: Use **`React.lazy`** or **`next\u002Fdynamic`** for heavy components like **Charts**, **Modals**, or large libraries.\n- **Dependency Reduction**: **Replace moment with dayjs** or **lodash with native\u002Fradash** to drop bytes. Use **`source-map-explorer`** or **`bundle-visualizer`** to find bloat.\n\n## Rendering & Re-renders (P1)\n\n- **Isolation**: Move state as close to its usage as possible. Isolate heavy UI updates.\n- **List Performance**: Use **`react-window`** or **`react-virtual`** for **virtualization** of lists with 500+ items. Wrap list items in **`React.memo`**.\n- **Context Splitting**: **Split Context** into `State` and `Dispatch` objects. This prevents all consumers from re-rendering when only a setter is needed.\n- **Stability**: Use **`useMemo` for derived list data** and passing stable object\u002Farray references to children.\n- **Content Visibility**: `content-visibility: auto` for off-screen CSS content.\n- **Static Hoisting**: Extract static objects\u002FJSX outside component scope.\n- **Transitions**: `startTransition` for non-urgent UI updates.\n\n## Parallelization (P1)\n\n- **Web Workers**: Move heavy computation (Encryption, Image processing, Large Data Sorting) off the main thread using `Comlink` or `Worker`.\n\n## Server Performance (RSC) (P1)\n\n- **Caching**: `React.cache` for per-request deduplication.\n- **Serialization**: Minimize props passing to Client Components (only IDs\u002Fprimitives).\n\n## Anti-Patterns\n\n- **No `export *`**: Breaks tree-shaking.\n- **No Sequential Await**: Causes waterfalls.\n- **No Inline Objects**: `style={{}}` breaks strict equality checks (if memoized).\n- **No Heavy Libs**: Avoid moment\u002Flodash (use dayjs\u002Fradash).\n\n## References\n\nSee [references\u002FREFERENCE.md](references\u002FREFERENCE.md) for Profiler usage, bundle analysis, Web Workers, and debounce patterns.\n\n",{"name":5,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002FHoangNguyen0403\u002Fagent-skills-standard\u002Freact-performance",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":53,"prompt":63,"zipAvailable":64},[54,57,60],{"tool":55,"command":56},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill react-performance",{"tool":58,"command":59},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill react-performance",{"tool":61,"command":62},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill react-performance","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FHoangNguyen0403\u002Fagent-skills-standard\u002Freact-performance\u002FSKILL.md",true,[66,72,76,80,84],{"path":67,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":70,"sourceHtmlUrl":71},"bmad-skill-manifest.yaml","REFERENCE","参考文档",984,"https:\u002F\u002Fgithub.com\u002FdevelopAgent\u002Fbmad-start\u002Fblob\u002Fmain\u002F.kilocode\u002Fskills\u002Fbmad-agent-tech-writer\u002Fbmad-skill-manifest.yaml",{"path":73,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":74,"sourceHtmlUrl":75},"explain-concept.md",687,"https:\u002F\u002Fgithub.com\u002FdevelopAgent\u002Fbmad-start\u002Fblob\u002Fmain\u002F.kilocode\u002Fskills\u002Fbmad-agent-tech-writer\u002Fexplain-concept.md",{"path":77,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":78,"sourceHtmlUrl":79},"mermaid-gen.md",684,"https:\u002F\u002Fgithub.com\u002FdevelopAgent\u002Fbmad-start\u002Fblob\u002Fmain\u002F.kilocode\u002Fskills\u002Fbmad-agent-tech-writer\u002Fmermaid-gen.md",{"path":81,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":82,"sourceHtmlUrl":83},"validate-doc.md",659,"https:\u002F\u002Fgithub.com\u002FdevelopAgent\u002Fbmad-start\u002Fblob\u002Fmain\u002F.kilocode\u002Fskills\u002Fbmad-agent-tech-writer\u002Fvalidate-doc.md",{"path":85,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":86,"sourceHtmlUrl":87},"write-document.md",931,"https:\u002F\u002Fgithub.com\u002FdevelopAgent\u002Fbmad-start\u002Fblob\u002Fmain\u002F.kilocode\u002Fskills\u002Fbmad-agent-tech-writer\u002Fwrite-document.md",[89,101,111,120,126,133],{"skillNo":90,"name":91,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":97,"publishedAt":38},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[94],{"categoryNo":95,"categoryName":96,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[98,99,100],"model","model hierarchy","model hierarchy skill",{"skillNo":102,"name":103,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":104,"categories":105,"keywords":107,"publishedAt":38},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[106],{"categoryNo":95,"categoryName":96,"taxonomyType":21,"taxonomyTypeDesc":22},[108,109,110],"MCP","zoom","zoom mcp",{"skillNo":112,"name":113,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":114,"categories":115,"keywords":116,"publishedAt":38},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[117,118,119,109],"sdk","zoom apps sdk","apps",{"skillNo":121,"name":122,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":123,"categories":124,"keywords":125,"publishedAt":38},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[122],{"skillNo":127,"name":128,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":132,"publishedAt":38},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[131],{"categoryNo":95,"categoryName":96,"taxonomyType":21,"taxonomyTypeDesc":22},[128],{"skillNo":134,"name":135,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":136,"categories":137,"keywords":138,"publishedAt":38},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[135]]