React useEffect 使用指南：何时需要与何时避免 Effect 的最佳实践

react-useeffect by davila7/claude-code-templates

272 周安装量

23,500 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/davila7/claude-code-templates --skill react-useeffect

React JavaScript 框架性能优化

🇨🇳中文介绍

你可能并不需要 Effect

Effect 是 React 的逃生舱。它们让你可以与外部系统同步。如果不涉及外部系统，你就不应该需要 Effect。

快速参考

场景	不要这样做	应该这样做
从 props/state 派生的状态	`useState` + `useEffect`	在渲染期间计算
昂贵的计算	用 `useEffect` 来缓存	`useMemo`
在 prop 改变时重置状态	使用 `useEffect` 和 `setState`

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

当你确实需要 Effect 时

与外部系统同步（非 React 组件、浏览器 API）
订阅外部存储（尽可能使用 useSyncExternalStore）
因组件显示而运行的分析/日志记录
带有适当清理的数据获取（或使用框架的内置机制）

当你不需要 Effect 时

为渲染转换数据 - 在顶层计算，会自动重新运行
处理用户事件 - 使用事件处理程序，你确切知道发生了什么
派生状态 - 直接计算：const fullName = firstName + ' ' + lastName
链式状态更新 - 在事件处理程序中计算所有下一个状态

Need 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

反模式 - 常见错误及修复方法
更好的替代方案 - useMemo、key prop、状态提升、useSyncExternalStore

🇺🇸English

You Might Not Need an Effect

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.

Quick Reference

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

When You DO Need Effects

Synchronizing with external systems (non-React widgets, browser APIs)
Subscriptions to external stores (use useSyncExternalStore when possible)
Analytics/logging that runs because component displayed
Data fetching with proper cleanup (or use framework's built-in mechanism)

When You DON'T Need Effects

Transforming data for rendering - Calculate at top level, re-runs automatically
Handling user events - Use event handlers, you know exactly what happened
Deriving state - Just compute it: const fullName = firstName + ' ' + lastName
Chaining state updates - Calculate all next state in the event handler

Decision Tree

Need 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

Detailed Guidance

Anti-Patterns - Common mistakes with fixes
Better Alternatives - useMemo, key prop, lifting state, useSyncExternalStore

Weekly Installs

272

Repository

davila7/claude-…emplates

GitHub Stars

23.5K

First Seen

Jan 25, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode222

gemini-cli216

codex214

github-copilot203

claude-code201

cursor190

Flutter应用架构设计指南：分层结构、数据层实现与最佳实践

3,400 周安装