React 避坑指南：让电脑卡死的“无限循环“
写在前面：如果开发的时候突然听到电脑风扇狂转，或者浏览器卡死不动了，别慌，先按电源键强制关机（bushi）。
广告植入：欢迎访问我的个人网站：https://hixiaohezi.com
作为一个拥有 x 年经验的老菜鸟，我大多时候用的的 vue , 最近在学 react ,觉得useEffect是个好东西。直到我写了一个看似人畜无害的数据查询功能。
需求很简单：当筛选条件变化时，重新请求数据。
function userList() { const [data, setData] = useState([]); // 筛选条件：查"激活状态"的用户 const filter = { status: 'active' }; useEffect(() => { console.log('发起请求...'); fetchData(filter).then(res => setData(res)); }, [filter]); // 依赖 filter，没毛病吧？ return <div>用户列表...</div>; }保存，刷新。
问题出现
刚开始页面还挺正常。但过了一会儿笔记本的风扇声音突然变大，电脑页整个卡住了。
打开控制台（趁着还能动），Network 面板里那是红旗招展，请求像机关枪一样突突突地发出去：
Request 1 Request 2 ... Request 10086我不得不使出绝招： 杀掉浏览器进程。
查找原因：该死的"引用类型"
菜，无需多言。
在 JavaScript 里，{}永远不等于{}。
来看看发生了什么惨案：
- 组件挂载，创建
filter对象（地址 A）。 useEffect执行，发现filter是新的，发起请求。- 请求回来，调用
setData更新数据。 - 组件重新渲染（重点来了！）。
- 组件函数重新执行，创建新的
filter对象（地址 B）。 useEffect再次对比依赖：地址 A !== 地址 B。- 又要执行 Effect！
- 回到第 2 步，无限套娃…
解决方案
找到原因，解决办法也就有了。
方案一：useMemo 大法 (推荐 ✅)
既然是对象变了，那我就让它别变。用useMemo把它"冻"住：
// 只有依赖项变了，filter 才会变 const filter = useMemo(() => ({ status: 'active' }), []); useEffect(() => { fetchData(filter); }, [filter]);方案二：简单粗暴拆解法 (最实用 ✅)
别传对象了，能不能直接传基本类型？
const status = 'active'; useEffect(() => { fetchData({ status }); // 在里面组装对象 }, [status]); // 依赖字符串，字符串 'active' === 'active'，稳如老狗方案三：JSON.stringify (野路子 ⚡)
实在懒得拆，就把对象转成字符串对比。虽然有点 low，有时候还挺好使。
const filter = { status: 'active' }; useEffect(() => { fetchData(filter); }, [JSON.stringify(filter)]); // 只要内容不变，字符串就不变总结
重启完电脑，看着不再狂转的风扇，我悟了：
React 的依赖比较是"浅比较"，它只看皮囊（内存地址），不看灵魂（对象内容）。
作为一个老菜鸟，不仅要防闭包，还得防对象。这哪里是写代码，简直是在玩扫雷。
如果这个坑你也踩过，握个爪。
最后，再加个广告，欢迎访问我的个人网站：
👉 hixiaohezi.com
(这里是我的个人网站，虽然没多少技术含量，但主打一个真实)
祝大家的代码永远不卡顿，CPU 永远冷静！