[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M719N65M98ZE4ACSN8SC4BJW":3,"skill-same:01M719N65M98ZE4ACSN8SC4BJW":63},{"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":37,"linkOnly":38,"markdownContent":39,"markdownBody":40,"frontMatter":41,"refName":43,"commitSha":44,"skillDirectory":45,"forksCount":14,"repositoryHtmlUrl":46,"repositoryHomepageUrl":6,"ownerHtmlUrl":47,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":48,"install":49,"resources":62},"01M719N65M98ZE4ACSN8SC4BJW","react-patterns",null,"Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.","sapsapshen\u002Fai-memory-router","sapsapshen","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F20347959?v=4","01M6XDQEF1DP50DKF37H81J3J5","shenmian","01M6XDQEJPE41Y3DT2763X8ZJN",0,"MIT","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fglobal\u002Freact-patterns\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],"react","patterns","react patterns","community","Composition","performance","hooks","2026","safe","typescript","typescript best practices","best practices","principles","2026-11-10 10:12:30",false,"---\nname: react-patterns\ndescription: \"Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.\"\nrisk: safe\nsource: community\ndate_added: \"2026-02-27\"\n---\n\n# React Patterns\n\n> Principles for building production-ready React applications.\n\n---\n\n## 1. Component Design Principles\n\n### Component Types\n\n| Type | Use | State |\n|------|-----|-------|\n| **Server** | Data fetching, static | None |\n| **Client** | Interactivity | useState, effects |\n| **Presentational** | UI display | Props only |\n| **Container** | Logic\u002Fstate | Heavy state |\n\n### Design Rules\n\n- One responsibility per component\n- Props down, events up\n- Composition over inheritance\n- Prefer small, focused components\n\n---\n\n## 2. Hook Patterns\n\n### When to Extract Hooks\n\n| Pattern | Extract When |\n|---------|-------------|\n| **useLocalStorage** | Same storage logic needed |\n| **useDebounce** | Multiple debounced values |\n| **useFetch** | Repeated fetch patterns |\n| **useForm** | Complex form state |\n\n### Hook Rules\n\n- Hooks at top level only\n- Same order every render\n- Custom hooks start with \"use\"\n- Clean up effects on unmount\n\n---\n\n## 3. State Management Selection\n\n| Complexity | Solution |\n|------------|----------|\n| Simple | useState, useReducer |\n| Shared local | Context |\n| Server state | React Query, SWR |\n| Complex global | Zustand, Redux Toolkit |\n\n### State Placement\n\n| Scope | Where |\n|-------|-------|\n| Single component | useState |\n| Parent-child | Lift state up |\n| Subtree | Context |\n| App-wide | Global store |\n\n---\n\n## 4. React 19 Patterns\n\n### New Hooks\n\n| Hook | Purpose |\n|------|---------|\n| **useActionState** | Form submission state |\n| **useOptimistic** | Optimistic UI updates |\n| **use** | Read resources in render |\n\n### Compiler Benefits\n\n- Automatic memoization\n- Less manual useMemo\u002FuseCallback\n- Focus on pure components\n\n---\n\n## 5. Composition Patterns\n\n### Compound Components\n\n- Parent provides context\n- Children consume context\n- Flexible slot-based composition\n- Example: Tabs, Accordion, Dropdown\n\n### Render Props vs Hooks\n\n| Use Case | Prefer |\n|----------|--------|\n| Reusable logic | Custom hook |\n| Render flexibility | Render props |\n| Cross-cutting | Higher-order component |\n\n---\n\n## 6. Performance Principles\n\n### When to Optimize\n\n| Signal | Action |\n|--------|--------|\n| Slow renders | Profile first |\n| Large lists | Virtualize |\n| Expensive calc | useMemo |\n| Stable callbacks | useCallback |\n\n### Optimization Order\n\n1. Check if actually slow\n2. Profile with DevTools\n3. Identify bottleneck\n4. Apply targeted fix\n\n---\n\n## 7. Error Handling\n\n### Error Boundary Usage\n\n| Scope | Placement |\n|-------|-----------|\n| App-wide | Root level |\n| Feature | Route\u002Ffeature level |\n| Component | Around risky component |\n\n### Error Recovery\n\n- Show fallback UI\n- Log error\n- Offer retry option\n- Preserve user data\n\n---\n\n## 8. TypeScript Patterns\n\n### Props Typing\n\n| Pattern | Use |\n|---------|-----|\n| Interface | Component props |\n| Type | Unions, complex |\n| Generic | Reusable components |\n\n### Common Types\n\n| Need | Type |\n|------|------|\n| Children | ReactNode |\n| Event handler | MouseEventHandler |\n| Ref | RefObject\u003CElement> |\n\n---\n\n## 9. Testing Principles\n\n| Level | Focus |\n|-------|-------|\n| Unit | Pure functions, hooks |\n| Integration | Component behavior |\n| E2E | User flows |\n\n### Test Priorities\n\n- User-visible behavior\n- Edge cases\n- Error states\n- Accessibility\n\n---\n\n## 10. Anti-Patterns\n\n| ❌ Don't | ✅ Do |\n|----------|-------|\n| Prop drilling deep | Use context |\n| Giant components | Split smaller |\n| useEffect for everything | Server components |\n| Premature optimization | Profile first |\n| Index as key | Stable unique ID |\n\n---\n\n> **Remember:** React is about composition. Build small, combine thoughtfully.\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n","# React Patterns\n\n> Principles for building production-ready React applications.\n\n---\n\n## 1. Component Design Principles\n\n### Component Types\n\n| Type | Use | State |\n|------|-----|-------|\n| **Server** | Data fetching, static | None |\n| **Client** | Interactivity | useState, effects |\n| **Presentational** | UI display | Props only |\n| **Container** | Logic\u002Fstate | Heavy state |\n\n### Design Rules\n\n- One responsibility per component\n- Props down, events up\n- Composition over inheritance\n- Prefer small, focused components\n\n---\n\n## 2. Hook Patterns\n\n### When to Extract Hooks\n\n| Pattern | Extract When |\n|---------|-------------|\n| **useLocalStorage** | Same storage logic needed |\n| **useDebounce** | Multiple debounced values |\n| **useFetch** | Repeated fetch patterns |\n| **useForm** | Complex form state |\n\n### Hook Rules\n\n- Hooks at top level only\n- Same order every render\n- Custom hooks start with \"use\"\n- Clean up effects on unmount\n\n---\n\n## 3. State Management Selection\n\n| Complexity | Solution |\n|------------|----------|\n| Simple | useState, useReducer |\n| Shared local | Context |\n| Server state | React Query, SWR |\n| Complex global | Zustand, Redux Toolkit |\n\n### State Placement\n\n| Scope | Where |\n|-------|-------|\n| Single component | useState |\n| Parent-child | Lift state up |\n| Subtree | Context |\n| App-wide | Global store |\n\n---\n\n## 4. React 19 Patterns\n\n### New Hooks\n\n| Hook | Purpose |\n|------|---------|\n| **useActionState** | Form submission state |\n| **useOptimistic** | Optimistic UI updates |\n| **use** | Read resources in render |\n\n### Compiler Benefits\n\n- Automatic memoization\n- Less manual useMemo\u002FuseCallback\n- Focus on pure components\n\n---\n\n## 5. Composition Patterns\n\n### Compound Components\n\n- Parent provides context\n- Children consume context\n- Flexible slot-based composition\n- Example: Tabs, Accordion, Dropdown\n\n### Render Props vs Hooks\n\n| Use Case | Prefer |\n|----------|--------|\n| Reusable logic | Custom hook |\n| Render flexibility | Render props |\n| Cross-cutting | Higher-order component |\n\n---\n\n## 6. Performance Principles\n\n### When to Optimize\n\n| Signal | Action |\n|--------|--------|\n| Slow renders | Profile first |\n| Large lists | Virtualize |\n| Expensive calc | useMemo |\n| Stable callbacks | useCallback |\n\n### Optimization Order\n\n1. Check if actually slow\n2. Profile with DevTools\n3. Identify bottleneck\n4. Apply targeted fix\n\n---\n\n## 7. Error Handling\n\n### Error Boundary Usage\n\n| Scope | Placement |\n|-------|-----------|\n| App-wide | Root level |\n| Feature | Route\u002Ffeature level |\n| Component | Around risky component |\n\n### Error Recovery\n\n- Show fallback UI\n- Log error\n- Offer retry option\n- Preserve user data\n\n---\n\n## 8. TypeScript Patterns\n\n### Props Typing\n\n| Pattern | Use |\n|---------|-----|\n| Interface | Component props |\n| Type | Unions, complex |\n| Generic | Reusable components |\n\n### Common Types\n\n| Need | Type |\n|------|------|\n| Children | ReactNode |\n| Event handler | MouseEventHandler |\n| Ref | RefObject\u003CElement> |\n\n---\n\n## 9. Testing Principles\n\n| Level | Focus |\n|-------|-------|\n| Unit | Pure functions, hooks |\n| Integration | Component behavior |\n| E2E | User flows |\n\n### Test Priorities\n\n- User-visible behavior\n- Edge cases\n- Error states\n- Accessibility\n\n---\n\n## 10. Anti-Patterns\n\n| ❌ Don't | ✅ Do |\n|----------|-------|\n| Prop drilling deep | Use context |\n| Giant components | Split smaller |\n| useEffect for everything | Server components |\n| Premature optimization | Profile first |\n| Index as key | Stable unique ID |\n\n---\n\n> **Remember:** React is about composition. Build small, combine thoughtfully.\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n",{"name":5,"risk":32,"source":27,"date_added":42,"description":7},"2026-02-27","main","7a38d8e7073e61c16eda85681cb32fb68a8657a5","skills-store\u002Fglobal\u002Freact-patterns","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router","https:\u002F\u002Fgithub.com\u002Fsapsapshen","2026-04-14 21:12:12",{"source":8,"skillName":5,"commands":50,"prompt":60,"zipAvailable":61},[51,54,57],{"tool":52,"command":53},"npx","npx skills add sapsapshen\u002Fai-memory-router --skill react-patterns",{"tool":55,"command":56},"bunx","bunx skills add sapsapshen\u002Fai-memory-router --skill react-patterns",{"tool":58,"command":59},"pnpm","pnpm dlx skills add sapsapshen\u002Fai-memory-router --skill react-patterns","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fglobal\u002Freact-patterns\u002FSKILL.md",true,[],[64,88,114,124,137,154],{"skillNo":65,"name":66,"nameZh":6,"description":67,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":68,"categories":69,"keywords":75,"publishedAt":37},"01M71ATQRKG48SH06FQ697T5G9","wechat-search","Search WeChat Official Account articles using OpenClaw's web search and fetch capabilities with compliance-focused design.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fwechat-search-release\u002FSKILL.md",[70],{"categoryNo":71,"categoryName":72,"taxonomyType":73,"taxonomyTypeDesc":74},"01JBSEEDCAT000000000000037","律师与法务","PROFESSION","适用职业",[76,77,78,79,80,81,82,83,84,85,86,87],"wechat search","wechat","search","capabilities","openclaw","design","web search","compliance","web","official","fetch","with",{"skillNo":89,"name":90,"nameZh":6,"description":91,"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":94,"publishedAt":37},"01M71ATNAVGZB35PFYM2GC5N00","trend-tap","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend tap', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-tap\u002FSKILL.md",[],[95,96,97,98,99,100,78,101,102,103,104,105,106,107,108,109,110,111,112,113],"trend","trend tap","tap","api keys","Bash","time","trending","hacker","aggregator","do","when","brew","live","data","google","install","read","across","api",{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":120,"publishedAt":37},"01M71ATJ9AM5KM15AA8PS302EB","trend-radar","Real-time trending topics aggregator across 7 platforms (X\u002FTwitter, Reddit, Google Trends, Hacker News, Zhihu, Bilibili, Weibo). Trigger: when user says 'trend', 'trends', 'trend pulse', '热点', '热搜', or asks what is trending\u002Fhot. Do NOT use web_search — this skill already fetches live data from all platforms with zero API keys.","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftrend-radar\u002FSKILL.md",[],[121,122,95,106,107,108,109,99,78,111,123,112,113,105,103,102,101,110,100,98],"trend radar","radar","pulse",{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":128,"categories":129,"keywords":130,"publishedAt":37},"01M71ATGF095N3EJM9G8SD0BB5","tech-news-daily","每日科技新闻汇——从全球多个 RSS 源抓取最新科技新闻，翻译（英→中）、去重、排版成每日简报。当用户询问科技新闻、科技新鲜事、每日科技、技术动态、Daily Tech News 或类似表达时触发此技能。","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Ftech-news-daily\u002FSKILL.md",[],[131,132,133,134,135,136],"news","tech","tech news daily","daily","rss","翻译",{"skillNo":138,"name":139,"nameZh":6,"description":140,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":141,"categories":142,"keywords":146,"publishedAt":37},"01M71ATFAEAMQ17M70NQNY7SR8","summarize","Summarize URLs or files with the summarize CLI (web, PDFs, images, audio, YouTube).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsummarize\u002FSKILL.md",[143],{"categoryNo":144,"categoryName":145,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000021","资料检索与研究",[139,84,147,148,149,87,106,150,151,152,97,153,110],"Audio","cli","youtube","images","https","files","pdfs",{"skillNo":155,"name":156,"nameZh":6,"description":157,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":158,"categories":159,"keywords":160,"publishedAt":37},"01M71ATDNS3R0M4H936PACQAWZ","sonoscli","Control Sonos speakers (discover\u002Fstatus\u002Fplay\u002Fvolume\u002Fgroup).","https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fopenclaw\u002Fsonoscli\u002FSKILL.md",[],[156,161,162,163,110,164,151,165,166,167,168,169],"status","play","go","latest","github","discover","control","cmd","volume"]