useEffect 的消亡以及其中的动态衍生角色
在 React 的发展历程中，useEffect 一直是函数组件中最具争议、也最容易被滥用的 Hook。早期，开发者习惯将所有“副作用”塞进 useEffect 中，将其视作类组件 componentDidMount、componentDidUpdate 和 componentWillUnmount 的替代品。然而，随着 React 团队提出“你可能不需要 Effect”的理念，useEffect 正在经历一种实质性的“消亡”——它不再是包揽一切的万能药，而是退回到它应有的边界内。与此同时，动态衍生的角色正在取代以往由 useEffect 承担的大量职责。
一、useEffect 的“消亡”：从万能胶水到精确制导
useEffect 的滥用往往源于对 React 渲染机制的误解。很多开发者用它来同步状态、计算衍生数据或请求外部数据。这导致了无数的无限渲染循环、过期闭包以及竞态条件。React 核心团队近年来的趋势非常明确：将副作用从渲染路径中剥离，让组件更纯粹地服务于 UI 计算。
“消亡”并不意味着 useEffect 被废弃，而是它的职责被大幅缩减。它不再用于处理以下场景：
根据 Props 或 State 计算衍生数据。
重置 State。
与浏览器 API 或非 React 系统无关的 DOM 操作。
如今，useEffect 的真正使命仅剩：与外部系统同步。例如：订阅 WebSocket、操作非 React 管理的 DOM 节点、设置定时器等。只有当组件需要与 React 之外的系统“对话”时，useEffect 才是合理的选择。
二、动态衍生角色的崛起
当 useEffect 退位，谁来接管那些原本由它处理的数据流转？答案是动态衍生。在 React 的单一数据流中，任何可以通过已有 Props 或 State 计算得出的值，都不应该作为新的 State 存储，更不需要用 useEffect 去同步。
1. 渲染期直接衍生
最常见的滥用是用 useEffect 监听依赖变化然后修改另一个 State。正确做法是在渲染阶段直接计算。
// 错误示范：滥用 useEffect 同步衍生状态
const [items, setItems] = useState([]);
const [filteredItems, setFilteredItems] = useState([]);
useEffect(() => {
setFilteredItems(items.filter(item => item.active));
}, [items]);
// 正确做法：渲染期动态衍生，无需 useEffect 和额外 State
const [items, setItems] = useState([]);
const filteredItems = items.filter(item => item.active);2. 缓存衍生（useMemo）
如果衍生计算开销较大，或者需要保持引用稳定性（传递给子组件作为 props 或依赖项），useMemo 是官方推荐的动态衍生工具，而非 useEffect。
const [data, setData] = useState(null);
const [filter, setFilter] = useState('');
// 动态衍生并缓存，仅当 data 或 filter 变化时重新计算
const processedData = useMemo(() => {
if (!data) return [];
return expensiveTransform(data, filter);
}, [data, filter]);3. 事件处理与状态重置
很多时候，useEffect 被用来响应 Props 变化重置 State。React 官方明确指出，组件不应该因为自身的渲染而重置状态。状态重置应该由外部事件（如用户点击）驱动，或者通过给组件分配不同的 key 来强制重新挂载。
// 错误示范：用 useEffect 重置状态
const [userId, setUserId] = useState(null);
useEffect(() => {
setUserId(props.currentId);
}, [props.currentId]);
// 正确做法：在父组件中改变 key 重新挂载
// <UserProfile key={currentId} />三、数据获取的范式转移
数据获取曾是 useEffect 的重灾区，这导致了加载态管理、错误处理和竞态条件代码极其臃肿。现代 React 开发中，数据获取的动态衍生已经交由专门的请求库或架构层处理。
如果你依然在 useEffect 中手写 fetch 逻辑，建议转向以下方案：
SWR / React Query： 它们将服务端状态动态衍生为组件可消费的响应式数据，内置缓存、重试、去重和竞态处理。
React Server Components (RSC)： 在服务端直接获取数据并衍生为 UI，组件层面完全消除了
useEffect的数据请求逻辑。
使用专业的请求库，数据流变成了纯粹的动态衍生：
import useSWR from 'swr';
function Profile() {
// useSWR 动态衍生了 data 和 error，无需手动管理 isLoading、isError 状态
const { data, error, isLoading } = useSWR('/api/user', fetcher);
if (isLoading) return <span>Loading...</span>;
if (error) return <span>Error!</span>;
return <div>Hello {data.name}</div>;
}四、结语：拥抱纯粹的渲染流
useEffect 的“消亡”是 React 走向成熟的标志。开发者应当将思维从“命令式地响应生命周期”转变为“声明式地衍生 UI”。当你准备写下 useEffect 时，不妨先问自己三个问题：
这个逻辑是在与外部系统（DOM 节点、定时器、WebSocket）同步吗？
这个状态能否通过已有的 Props 或 State 动态计算得出？
这个副作用能否放在事件处理函数中执行？
如果第二点或第三点成立，请放下 useEffect，转而使用动态衍生或事件驱动。通过剥离不必要的副作用，组件的渲染将变得可预测、无竞态，这不仅是对性能的提升，更是对代码可维护性的根本性重构。有关更复杂的请求缓存策略实现，你可以参考 www.ipipp.com 提供的标准化数据拉取模式文档。