如何将数组作为React Hook useCallback的依赖项

你当前的写法确实存在性能隐患：JSON.stringify 是 O(n) 复杂度的操作，数组元素较多时，每次组件渲染都会执行序列化，开销远大于依赖直接对比引用的成本，同时禁用 eslint 检查也会引入依赖遗漏的风险。推荐按优先级选择以下两种方案：

方案1：用 useRef 同步最新值（最稳定，优先推荐） #

利用 useRef 存储 items 的最新引用，回调直接读取 ref 内的值，不需要把 items 加入依赖数组，回调永远保持稳定，完全不会触发使用它的组件重渲染。

import { useRef, useEffect, useCallback } from 'react';
import { useSelector, useDispatch, shallowEqual } from 'react-redux';

const YourComponent = () => {
  const dispatch = useDispatch();
  // 从Redux取items，用shallowEqual避免不必要的引用变化
  const items = useSelector(state => state.yourModule.items, shallowEqual);
  // 用ref同步最新的items
  const itemsRef = useRef(items);

  // items变化时更新ref，开销极低
  useEffect(() => {
    itemsRef.current = items;
  }, [items]);

  const handleAllItemsSelectedChange = useCallback((checked) => {
    if (checked) {
      dispatch(setSelected(itemsRef.current));
    } else {
      dispatch(selectSelected([]));
    }
  }, [dispatch]); // React Redux的dispatch是永久稳定的，不会变化

  // 其余组件逻辑...
}

优势：回调完全稳定，不会因为items更新触发重渲染，无需禁用eslint规则，性能开销几乎可以忽略。适合对回调稳定性要求极高、或者items规模极大的场景。

方案2：直接依赖items引用（代码最简，适合常规场景） #

Redux官方要求reducer必须用不可变更新，也就是说只有items内容真的发生变化时，才会返回新的数组引用。配合useSelector的shallowEqual对比，只有数组元素真的变更时，items的引用才会更新，此时useCallback才会生成新的回调，更新频率和你实际的items变化频率完全一致。

import { useCallback } from 'react';
import { useSelector, useDispatch, shallowEqual } from 'react-redux';

const YourComponent = () => {
  const dispatch = useDispatch();
  // shallowEqual会对比数组每一项的引用，内容不变则返回原有引用
  const items = useSelector(state => state.yourModule.items, shallowEqual);

  const handleAllItemsSelectedChange = useCallback((checked) => {
    if (checked) {
      dispatch(setSelected(items));
    } else {
      dispatch(selectSelected([]));
    }
  }, [dispatch, items]);

  // 其余组件逻辑...
}

优势：代码简洁无额外逻辑，符合React Hooks的官方规范，常规场景下性能完全够用。只有当items真的变化时才会更新回调，触发子组件重渲染的频率极低。

JSON.stringify(items)作为依赖的问题有两个：

• 每次组件渲染都要全量序列化数组，元素越多性能损耗越大，反而不如直接把items作为依赖的浅对比开销低
• 禁用eslint的依赖检查后，后续修改回调逻辑时很容易遗漏新的依赖，出现闭包陷阱问题

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