React useEffect依赖漏写，重复渲染！

博客主页瑕疵的CSDN主页 Gitee主页瑕疵的gitee主页⏩ 文章专栏《热点资讯》useEffect依赖漏写别让组件在深夜疯狂重渲染目录useEffect依赖漏写别让组件在深夜疯狂重渲染昨天改个需求组件突然像中了邪一样疯狂重渲染。控制台刷屏“useEffect执行”UI卡得像PPT。我盯着代码手抖得差点把咖啡泼在键盘上。报错现场functionUserList(){const[users,setUsers]useState([]);constfetchData(){// 模拟API请求setTimeout(()setUsers([{id:1,name:张三}]),500);};// 错误写法依赖数组漏了fetchDatauseEffect((){fetchData();},[]);// 你以为这里安全大错特错returndiv{users.map(uu.name)}/div;}结果每次状态变化比如组件挂载后fetchData都重新执行。数据重复请求UI反复刷新。核心根源React的useEffect依赖数组是防抖开关。漏写依赖项React会认为“每次渲染都有新数据”强制重执行effect。这里fetchData在effect内部定义但依赖数组是空的。React不会跟踪fetchData的变化所以每次渲染都当新函数处理。对比代码// 错误依赖数组空但用到了外部函数useEffect((){fetchData();// 依赖了fetchData但没写进数组},[]);// 每次渲染都触发// 正确依赖数组包含所有外部变量useEffect((){fetchData();// 依赖了fetchData},[fetchData]);// 必须加关键修复把effect里用到的所有外部变量塞进依赖数组。这里fetchData是函数必须显式声明// 修正后依赖数组包含fetchDatauseEffect((){fetchData();},[fetchData]);// 拼命提醒自己别漏避坑总结ESLint是救命稻草装eslint-plugin-react-hooksexhaustive-deps规则会直接报错。npminstalleslint-plugin-react-hooks--save-dev写effect前先问自己“这个effect里用了哪些外部变量”比如data、fetchData、userId一个不漏全塞进数组。空数组不是万能useEffect(() {...}, [])只用于初始化请求比如挂载时加载数据。如果用了data必须写[data]否则重复请求。临时方案别乱用有人写useEffect(() {...}, [someVar])但someVar可能为undefined。用useRef存函数constfetchDataRefuseRef(fetchData);fetchDataRef.currentfetchData;// 保持最新useEffect((){fetchDataRef.current();},[]);最后吐个槽这依赖数组坑我三次了。昨天debug到三点发现是漏了fetchData。别信“依赖数组空就安全”——React不骗人它只是太诚实。下次写前先在注释里写// 依赖fetchData别漏记住useEffect不是自动防抖是手动防抖。你漏了它就疯狂刷。