React.useEffect空依赖数组是否合规？遇渲染问题如何解决

为什么空依赖数组会触发ESLint提示？ #

ESLint的react-hooks/exhaustive-deps规则会检查useEffect内部用到的所有外部变量，你的代码里useEffect用到了itemList、objectMap、isEmpty这几个变量，但它们都没出现在依赖数组里。ESLint认为这些变量可能会变化，若不加入依赖，useEffect会一直使用初始渲染时的闭包值，导致转换逻辑无法响应这些变量的更新（比如父组件更新了itemList，但你的转换逻辑不会重新执行，得到的还是旧数据）。

为什么加入objectItemList会导致无限渲染？ #

当你把objectItemList加入依赖数组后，每次调用setObjectItemList更新它时，组件会重新渲染，useEffect会再次执行。如果此时isEmpty(objectItemList)判断失效（比如isEmpty函数逻辑有问题，或者objectItemList的引用每次都变化），就会反复执行setObjectItemList，触发无限渲染。另外，你的原逻辑只在objectItemList为空时执行转换，完全忽略了itemList更新的场景，这本身就是逻辑漏洞。

正确的实现方式：用useMemo替代useState+useEffect #

转换后的objectItemList属于衍生状态，它完全由itemList和objectMap决定，不需要单独存在useState里。用useMemo可以缓存转换结果，只有当依赖项变化时才重新计算，既符合React最佳实践，又能避免ESLint报错和无限渲染问题：

type ObjectMap = {
  key: string,
  text: string,
  parentId?: string|null
};

// 直接用useMemo计算衍生数组
const objectItemList = React.useMemo<Array<ObjectMap>>(() => {
  // 如果itemList为空，直接返回空数组
  if (isEmpty(itemList)) return [];

  return itemList.map((item) => {
    type ObjectKey = keyof typeof item;
    const keyValue = String(item[objectMap.key as ObjectKey]);
    const textValue = String(item[objectMap.text as ObjectKey]);
    let parentIdValue: string|null = String(item[objectMap.parentId as ObjectKey]);
    parentIdValue = parentIdValue === 'null' ? null : parentIdValue;
    return { key: keyValue, text: textValue, parentId: parentIdValue };
  });
}, [itemList, objectMap, isEmpty]); // 所有用到的外部变量都加入依赖

额外说明 #

• 如果objectMap是组件内部的常量（不是props或状态），可以把它定义在组件外部，这样就不需要加入useMemo的依赖数组里。
• 如果isEmpty是第三方库的工具函数（比如lodash的isEmpty），也可以移出组件或者确保它的引用稳定，避免不必要的重新计算。

内容的提问来源于stack exchange，提问作者RobertW