React中useEffect依赖缺失问题：窗口resize时如何重新计算组件数据？

这个问题我之前也碰到过——既要满足linter的依赖检查要求，又要避免状态更新导致的无限循环，关键在于区分真正需要触发重新计算的依赖，同时利用React的状态更新特性来规避不必要的依赖。

核心问题分析 #

你的linter提示缺少依赖，是因为effect里用到了navIndex、numberOfChunkedElement、tabs和value，但：

• value不能加，因为effect里会调用setValue，加入依赖会触发无限循环；
• numberOfChunkedElement是effect内部更新的状态，不需要作为依赖（你需要的是它更新前的旧值）；
• navIndex和tabs是会影响计算结果的外部状态，必须加入依赖（比如navIndex变化会改变numberOfTabIcons，进而影响wrapperWidth；tabs变化会改变分块的数据源）。

解决方案步骤 #

1. 使用Functional Update更新value

React的状态更新函数支持传入一个回调（functional update），它会接收当前的状态值作为参数，这样你就不需要直接依赖value变量，自然避免了无限循环。

2. 只保留必要的依赖

把width、navIndex、tabs加入依赖数组——这些值的变化确实需要重新计算标签分块逻辑。

3. 可选优化：防抖窗口Resize事件

窗口Resize会频繁触发事件，直接绑定width可能导致频繁计算，用防抖处理可以提升性能。

4. 空值安全检查

确保wrapper.current存在后再执行计算，避免组件挂载初期的空引用报错。

修改后的完整代码 #

import { useState, useEffect, useCallback, useRef } from 'react';
import { useWindowSize, useDebounce } from 'react-use';

const YourComponent = () => {
  const [value, setValue] = useState([0, 0]); // [selectedChunckedNavIndex, selectedIndex]
  const [navIndex, setNavIndex] = useState(0);
  const [numberOfChunkedElement, setNumberOfChunkedElement] = useState(0);
  const [chunkedTabs, setChunkedTabs] = useState<TabProps[][]>([[]]);
  const wrapper = useRef<HTMLDivElement>(null);
  const { width } = useWindowSize();
  // 给窗口宽度添加防抖，200ms后才触发计算
  const debouncedWidth = useDebounce(width, 200);

  // 用useCallback包裹chunkArray，避免每次渲染重新创建函数
  const chunkArray = useCallback((arr: TabProps[], size: number): TabProps[][] => {
    const chunks = [];
    for (let i = 0; i < arr.length; i += size) {
      chunks.push(arr.slice(i, i + size));
    }
    return chunks;
  }, []);

  useEffect(() => {
    // 确保wrapper元素存在
    if (!wrapper.current) return;

    const padding = 20; // The AppBar padding
    const numberOfTabIcons = navIndex === 0 ? 1 : 2;
    const wrapperWidth = wrapper.current.offsetWidth - padding - numberOfTabIcons * 30;
    const newChunkedElementSize = Math.floor(wrapperWidth / 170);

    // 使用functional update获取prevValue，不需要依赖value
    setValue(prevValue => {
      // 基于旧的chunk size计算当前的扁平索引
      const flattenIndex = prevValue[0] * numberOfChunkedElement + prevValue[1];
      // 转换为新chunk size下的索引
      return [
        Math.floor(flattenIndex / newChunkedElementSize),
        flattenIndex % newChunkedElementSize,
      ];
    });

    setNumberOfChunkedElement(newChunkedElementSize);
    setChunkedTabs(chunkArray([...tabs], newChunkedElementSize));
  }, [debouncedWidth, navIndex, tabs, chunkArray]);

  // 组件其他逻辑...
};

为什么这样有效？ #

• Functional Update：通过prevValue获取当前状态，不需要把value加入依赖数组，彻底避免无限循环；
• 正确的依赖数组：只保留debouncedWidth、navIndex、tabs和chunkArray，这些值的变化确实需要重新计算标签分块；
• 防抖处理：减少Resize事件的触发频率，优化性能；
• 空值检查：避免组件挂载初期的空引用错误。

内容的提问来源于stack exchange，提问作者Rémi Doreau