{"id":"668fffc0-be46-4ddb-932c-afef075bec57","shortId":"fVtNHy","kind":"skill","title":"react-useeffect","tagline":"React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives.","description":"# 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/state | `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/logging** 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/state 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](./anti-patterns.md) - Common mistakes with fixes\n- [Better Alternatives](./alternatives.md) - useMemo, key prop, lifting state, useSyncExternalStore","tags":["react","useeffect","agent","toolkit","softaworks","agent-skills","automation","claude","claude-code","coding-agent","development"],"capabilities":["skill","source-softaworks","skill-react-useeffect","topic-agent-skills","topic-automation","topic-claude","topic-claude-code","topic-coding-agent","topic-development"],"categories":["agent-toolkit"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/softaworks/agent-toolkit/react-useeffect","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add softaworks/agent-toolkit","source_repo":"https://github.com/softaworks/agent-toolkit","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 1847 github stars · SKILL.md body (2,029 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-05-18T18:52:58.910Z","embedding":null,"createdAt":"2026-04-18T20:27:57.271Z","updatedAt":"2026-05-18T18:52:58.910Z","lastSeenAt":"2026-05-18T18:52:58.910Z","tsv":"'/alternatives.md':282 '/anti-patterns.md':275 '1':175 '2':188 '3':200 '4':210 'altern':32,281 'analyt':245 'analytics/logging':150 'anti':273 'anti-pattern':272 'api':141 'appear':238 'automat':187 'best':6 'better':31,280 'browser':140 'built':166 'built-in':165 'cach':85 'calcul':78,82,180,214,252 'call':111,113 'chain':211 'chang':91,109,247,264 'cleanup':121,124,160 'click':231 'common':276 'compon':154,237,269 'comput':204 'const':206 'data':19,118,156,177 'decis':222 'deriv':17,72,201,250 'detail':270 'direct':105 'display':155 'doc':10 'drag':233 'effect':29,38,39,65,131,174,242 'escap':42 'event':98,103,115,191,193,220,235 'exact':197 'expens':81,255 'extern':51,57,134,144,243 'fetch':20,117,157 'firstnam':208 'fix':279 'framework':126,163 'fullnam':207 'guidanc':271 'handl':189 'handler':104,116,194,221,236 'happen':199 'hatch':43 'interact':230 'involv':59 'key':95,266,284 'know':196 'lastnam':209 'let':47 'level':183 'lift':286 'mechan':168 'might':34 'mistak':277 'need':36,63,130,173,224,249,258 'next':216 'non':137 'non-react':136 'notifi':106 'offici':9 'onchang':112 'parent':107 'pattern':274 'possibl':149 'practic':7 'prop':90,96,263,267,285 'proper':159 'props/state':75,246 'quick':66 're':185 're-run':184 'react':2,4,45,138 'react-useeffect':1 'refer':67 'render':80,179,254 'reset':87,260 'respond':226 'respons':99 'run':152,186 'screen':240 'setstat':94 'shouldn':61 'situat':68 'skill' 'skill-react-useeffect' 'someth':228 'source-softaworks' 'state':22,73,88,102,202,212,217,261,287 'store':145 'submit':232 'subscript':142 'sync':244 'synchron':23,49,132 'system':52,58,135 'teach':24 'top':182 'topic-agent-skills' 'topic-automation' 'topic-claude' 'topic-claude-code' 'topic-coding-agent' 'topic-development' 'transform':176 'tree':223 'updat':213 'use':11,28,146,162,192,234,241,256,265 'useeffect':3,5,14,77,83,92,100,110,119,122 'usememo':86,257,283 'user':97,190,229 'usest':15,76 'usesyncexternalstor':147,288 'valu':18,251 'watch':101 'widget':139 'without':120 'writing/reviewing':13","prices":[{"id":"a7b028c0-09f3-43bf-8580-5cfed20def1a","listingId":"668fffc0-be46-4ddb-932c-afef075bec57","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"softaworks","category":"agent-toolkit","install_from":"skills.sh"},"createdAt":"2026-04-18T20:27:57.271Z"}],"sources":[{"listingId":"668fffc0-be46-4ddb-932c-afef075bec57","source":"github","sourceId":"softaworks/agent-toolkit/react-useeffect","sourceUrl":"https://github.com/softaworks/agent-toolkit/tree/main/skills/react-useeffect","isPrimary":false,"firstSeenAt":"2026-04-18T21:54:44.364Z","lastSeenAt":"2026-05-18T18:52:58.910Z"},{"listingId":"668fffc0-be46-4ddb-932c-afef075bec57","source":"skills_sh","sourceId":"softaworks/agent-toolkit/react-useeffect","sourceUrl":"https://skills.sh/softaworks/agent-toolkit/react-useeffect","isPrimary":true,"firstSeenAt":"2026-04-18T20:27:57.271Z","lastSeenAt":"2026-05-07T22:40:51.940Z"}],"details":{"listingId":"668fffc0-be46-4ddb-932c-afef075bec57","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"softaworks","slug":"react-useeffect","github":{"repo":"softaworks/agent-toolkit","stars":1847,"topics":["agent-skills","ai","automation","claude","claude-code","coding-agent","development"],"license":"mit","html_url":"https://github.com/softaworks/agent-toolkit","pushed_at":"2026-03-05T16:46:24Z","description":"A curated collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities across development, documentation, planning, and professional workflows.","skill_md_sha":"d7c6ffb23fe43195f6814faf2ca2921e90fdcebd","skill_md_path":"skills/react-useeffect/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/softaworks/agent-toolkit/tree/main/skills/react-useeffect"},"layout":"multi","source":"github","category":"agent-toolkit","frontmatter":{"name":"react-useeffect","description":"React useEffect best practices from official docs. Use when writing/reviewing useEffect, useState for derived values, data fetching, or state synchronization. Teaches when NOT to use Effect and better alternatives."},"skills_sh_url":"https://skills.sh/softaworks/agent-toolkit/react-useeffect"},"updatedAt":"2026-05-18T18:52:58.910Z"}}