[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6R11FKKSR6EJA06ZCMPMQJS":3,"skill-same:01M6R11FKKSR6EJA06ZCMPMQJS":80},{"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":40,"linkOnly":41,"markdownContent":42,"markdownBody":43,"frontMatter":44,"refName":45,"commitSha":46,"skillDirectory":47,"forksCount":48,"repositoryHtmlUrl":49,"repositoryHomepageUrl":6,"ownerHtmlUrl":50,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":51,"install":52,"resources":65},"01M6R11FKKSR6EJA06ZCMPMQJS","react-useeffect",null,"React useEffect best practices from official docs. Use when writing\u002Freviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.","Mishit18\u002Fclaude-code-templates","Mishit18","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F244127857?v=4","01M6QXBYKWM76HSKYDNWSKKE41","Mishit Sharma","01M6QXBYRJ0CAVM51S1RTEKTZZ",1,"MIT","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Freact-useeffect\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,38,39],"react","react useeffect","writing","docs","official","best practices","state","data","synchronization","effect","use","values","for","data fetching","alternatives","when","2026-11-10 10:12:30",false,"---\nname: react-useeffect\ndescription: React useEffect best practices from official docs. Use when writing\u002Freviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.\n---\n\n# You Might Not Need an Effect\n\nEffects are an **escape hatch** from React. They let you synchronize with external systems. If there is no external system involved, you shouldn't need an Effect.\n\n## Quick Reference\n\n| Situation | DON'T | DO |\n|-----------|-------|-----|\n| Derived state from props\u002Fstate | `useState` + `useEffect` | Calculate during render |\n| Expensive calculations | `useEffect` to cache | `useMemo` |\n| Reset state on prop change | `useEffect` with `setState` | `key` prop |\n| User event responses | `useEffect` watching state | Event handler directly |\n| Notify parent of changes | `useEffect` calling `onChange` | Call in event handler |\n| Fetch data | `useEffect` without cleanup | `useEffect` with cleanup OR framework |\n\n## When You DO Need Effects\n\n- Synchronizing with **external systems** (non-React widgets, browser APIs)\n- **Subscriptions** to external stores (use `useSyncExternalStore` when possible)\n- **Analytics\u002Flogging** that runs because component displayed\n- **Data fetching** with proper cleanup (or use framework's built-in mechanism)\n\n## When You DON'T Need Effects\n\n1. **Transforming data for rendering** - Calculate at top level, re-runs automatically\n2. **Handling user events** - Use event handlers, you know exactly what happened\n3. **Deriving state** - Just compute it: `const fullName = firstName + ' ' + lastName`\n4. **Chaining state updates** - Calculate all next state in the event handler\n\n## Decision Tree\n\n```\nNeed to respond to something?\n├── User interaction (click, submit, drag)?\n│   └── Use EVENT HANDLER\n├── Component appeared on screen?\n│   └── Use EFFECT (external sync, analytics)\n├── Props\u002Fstate changed and need derived value?\n│   └── CALCULATE DURING RENDER\n│       └── Expensive? Use useMemo\n└── Need to reset state when prop changes?\n    └── Use KEY PROP on component\n```\n\n## Detailed Guidance\n\n- [Anti-Patterns](.\u002Fanti-patterns.md) - Common mistakes with fixes\n- [Better Alternatives](.\u002Falternatives.md) - useMemo, key prop, lifting state, useSyncExternalStore\n\n","# You Might Not Need an Effect\n\nEffects are an **escape hatch** from React. They let you synchronize with external systems. If there is no external system involved, you shouldn't need an Effect.\n\n## Quick Reference\n\n| Situation | DON'T | DO |\n|-----------|-------|-----|\n| Derived state from props\u002Fstate | `useState` + `useEffect` | Calculate during render |\n| Expensive calculations | `useEffect` to cache | `useMemo` |\n| Reset state on prop change | `useEffect` with `setState` | `key` prop |\n| User event responses | `useEffect` watching state | Event handler directly |\n| Notify parent of changes | `useEffect` calling `onChange` | Call in event handler |\n| Fetch data | `useEffect` without cleanup | `useEffect` with cleanup OR framework |\n\n## When You DO Need Effects\n\n- Synchronizing with **external systems** (non-React widgets, browser APIs)\n- **Subscriptions** to external stores (use `useSyncExternalStore` when possible)\n- **Analytics\u002Flogging** that runs because component displayed\n- **Data fetching** with proper cleanup (or use framework's built-in mechanism)\n\n## When You DON'T Need Effects\n\n1. **Transforming data for rendering** - Calculate at top level, re-runs automatically\n2. **Handling user events** - Use event handlers, you know exactly what happened\n3. **Deriving state** - Just compute it: `const fullName = firstName + ' ' + lastName`\n4. **Chaining state updates** - Calculate all next state in the event handler\n\n## Decision Tree\n\n```\nNeed to respond to something?\n├── User interaction (click, submit, drag)?\n│   └── Use EVENT HANDLER\n├── Component appeared on screen?\n│   └── Use EFFECT (external sync, analytics)\n├── Props\u002Fstate changed and need derived value?\n│   └── CALCULATE DURING RENDER\n│       └── Expensive? Use useMemo\n└── Need to reset state when prop changes?\n    └── Use KEY PROP on component\n```\n\n## Detailed Guidance\n\n- [Anti-Patterns](.\u002Fanti-patterns.md) - Common mistakes with fixes\n- [Better Alternatives](.\u002Falternatives.md) - useMemo, key prop, lifting state, useSyncExternalStore\n\n",{"name":5,"description":7},"main","015422534a7457348a313b6381f0255d3364eb8c","cli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Freact-useeffect",0,"https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates","https:\u002F\u002Fgithub.com\u002FMishit18","2026-11-12 18:26:48",{"source":8,"skillName":5,"commands":53,"prompt":63,"zipAvailable":64},[54,57,60],{"tool":55,"command":56},"npx","npx skills add Mishit18\u002Fclaude-code-templates --skill react-useeffect",{"tool":58,"command":59},"bunx","bunx skills add Mishit18\u002Fclaude-code-templates --skill react-useeffect",{"tool":61,"command":62},"pnpm","pnpm dlx skills add Mishit18\u002Fclaude-code-templates --skill react-useeffect","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Freact-useeffect\u002FSKILL.md",true,[66,72,76],{"path":67,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":70,"sourceHtmlUrl":71},"alternatives.md","REFERENCE","参考文档",5866,"https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Freact-useeffect\u002Falternatives.md",{"path":73,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":74,"sourceHtmlUrl":75},"anti-patterns.md",6146,"https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Freact-useeffect\u002Fanti-patterns.md",{"path":77,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":78,"sourceHtmlUrl":79},"README.md",10085,"https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Freact-useeffect\u002FREADME.md",[81,107,133,160,187,212],{"skillNo":82,"name":83,"nameZh":6,"description":84,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":85,"licenseFileUrl":86,"sourceHtmlUrl":87,"categories":88,"keywords":90,"publishedAt":40},"01M6R4ARN4W2VZRDERDTMN1KP0","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","Apache-2.0","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FSKILL.md",[89],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[91,92,93,94,95,96,97,98,24,99,100,30,101,102,34,103,104,105,36,106],"web artifacts builder","web","artifacts","artifacts builder","builder","frontend","css","components","routing","state management","file","Tailwind","single-file","ui components","multi","single",{"skillNo":108,"name":109,"nameZh":6,"description":110,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":85,"licenseFileUrl":111,"sourceHtmlUrl":112,"categories":113,"keywords":118,"publishedAt":40},"01M6R45GXREM5DP8T08MAC788H","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FSKILL.md",[114,117],{"categoryNo":115,"categoryName":116,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[119,120,121,96,122,123,92,124,125,126,127,128,129,130,131,132,36],"testing","webapp testing","webapp","screenshots","playwright","debugging","toolkit","browser","ui","logs","applications","behavior","local","with",{"skillNo":134,"name":135,"nameZh":6,"description":136,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":137,"sourceHtmlUrl":138,"categories":139,"keywords":140,"publishedAt":40},"01M6R2GYJ470X8EB7R58V0B68K","think-tank","Run a Virtual Think Tank — a structured multi-persona debate — before planning or making architectural\u002Fdesign\u002Fstrategic decisions. Use this skill whenever the user is about to plan a system, make a technology choice, evaluate trade-offs, decide on an approach, or faces any decision where multiple perspectives would sharpen the outcome. Also trigger when the user says \"think tank\", \"debate this\", \"perspectives on\", \"trade-offs\", \"should I use X or Y\", \"help me decide\", \"before we plan\", or asks for pros\u002Fcons of competing approaches. This skill should run BEFORE any implementation planning begins — it produces a structured analysis that feeds into better plans.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fthink-tank\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fthink-tank\u002FSKILL.md",[],[141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,39],"think tank","think","design","run","feeds","analysis","persona","plan","sharpen","virtual","decision","choice","decide","perspectives","outcome","me","debate","make","trade-offs",{"skillNo":161,"name":162,"nameZh":6,"description":163,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":85,"licenseFileUrl":164,"sourceHtmlUrl":165,"categories":166,"keywords":170,"publishedAt":40},"01M6R2FSR55AVRFA9YZ8SC2GZG","skill-creator","Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fskill-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fskill-creator\u002FSKILL.md",[167],{"categoryNo":168,"categoryName":169,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[171,172,173,174,175,176,177,178,179,180,181,182,183,184,132,36,185,39,186],"skill creator","creator","workflows","create","update","capabilities","knowledge","tool","integrations","specialized","guide","new skill","existing skill","users","Existing","new",{"skillNo":188,"name":189,"nameZh":6,"description":190,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":191,"categories":192,"keywords":193,"publishedAt":40},"01M6R2FK42ZZ4HJTJVVK9WJBBP","ship-learn-next","Transform learning content (like YouTube transcripts, articles, tutorials) into actionable implementation plans using the Ship-Learn-Next framework. Use when user wants to turn advice, lessons, or educational content into concrete action steps, reps, or a learning quest.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fship-learn-next\u002FSKILL.md",[],[194,195,196,197,198,199,200,201,34,202,203,204,205,206,207,208,209,210,211,39],"learn","ship learn next","ship","next","framework","learning","read","write","advice","implementation","youtube","plans","quest","transform","actionable","action","lessons","youtube transcripts",{"skillNo":213,"name":214,"nameZh":6,"description":215,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":85,"licenseFileUrl":216,"sourceHtmlUrl":217,"categories":218,"keywords":225,"publishedAt":40},"01M6R2088G1RHDA5MDX16HASRB","slack-gif-creator","Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like \"make me a GIF of X doing Y for Slack.\"","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fenterprise-communication\u002Fslack-gif-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fenterprise-communication\u002Fslack-gif-creator\u002FSKILL.md",[219,222],{"categoryNo":220,"categoryName":221,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000005","邮件与沟通",{"categoryNo":223,"categoryName":224,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",[226,227,228,172,229,230,231,232,177,34,156,184,158,233,234,36,235,39],"slack gif creator","slack","gif","validation","Tools","constraints","Animation","Utilities","concepts","request"]