react-useeffect by davila7/claude-code-templates
npx skills add https://github.com/davila7/claude-code-templates --skill react-useeffectEffect 是 React 的逃生舱。它们让你可以与外部系统同步。如果不涉及外部系统,你就不应该需要 Effect。
| 场景 | 不要这样做 | 应该这样做 |
|---|---|---|
| 从 props/state 派生的状态 | useState + useEffect | 在渲染期间计算 |
| 昂贵的计算 | 用 useEffect 来缓存 | useMemo |
| 在 prop 改变时重置状态 | 使用 useEffect 和 setState |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
组件的 key prop |
| 响应用户事件 | 用 useEffect 监听状态 | 直接在事件处理程序中处理 |
| 通知父组件变更 | 在 useEffect 中调用 onChange | 在事件处理程序中调用 |
| 获取数据 | 没有清理的 useEffect | 带清理的 useEffect 或使用框架 |
useSyncExternalStore)const fullName = firstName + ' ' + lastNameNeed to respond to something?
├── User interaction (click, submit, drag)?
│ └── Use EVENT HANDLER
├── Component appeared on screen?
│ └── Use EFFECT (external sync, analytics)
├── Props/state changed and need derived value?
│ └── CALCULATE DURING RENDER
│ └── Expensive? Use useMemo
└── Need to reset state when prop changes?
└── Use KEY PROP on component
每周安装量
272
代码仓库
GitHub 星标数
23.5K
首次出现
2026年1月25日
安全审计
安装于
opencode222
gemini-cli216
codex214
github-copilot203
claude-code201
cursor190
Effects 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.
| Situation | DON'T | DO |
|---|---|---|
| Derived state from props/state | useState + useEffect | Calculate during render |
| Expensive calculations | useEffect to cache | useMemo |
| Reset state on prop change | useEffect with setState | key prop |
| User event responses | useEffect watching state | Event handler directly |
| Notify parent of changes | useEffect calling onChange | Call in event handler |
| Fetch data | useEffect without cleanup | useEffect with cleanup OR framework |
useSyncExternalStore when possible)const fullName = firstName + ' ' + lastNameNeed to respond to something?
├── User interaction (click, submit, drag)?
│ └── Use EVENT HANDLER
├── Component appeared on screen?
│ └── Use EFFECT (external sync, analytics)
├── Props/state changed and need derived value?
│ └── CALCULATE DURING RENDER
│ └── Expensive? Use useMemo
└── Need to reset state when prop changes?
└── Use KEY PROP on component
Weekly Installs
272
Repository
GitHub Stars
23.5K
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode222
gemini-cli216
codex214
github-copilot203
claude-code201
cursor190
Flutter应用架构设计指南:分层结构、数据层实现与最佳实践
3,400 周安装