React中给useMemo依赖数组添加未使用依赖是否为不良实践？

核心问题：给useMemo添加未在回调中使用的依赖是否属于不良实践？ #

这属于不推荐的实践，原因如下：

• 违反React Hooks的设计语义：依赖数组的作用是告知React「只有当数组内变量变化时，才重新执行回调」，若回调未用到该变量，就背离了依赖数组的核心意义。
• 降低代码可读性：其他开发者看到依赖中的变量，会默认回调内用到了它，容易产生误解。
• 可能引发不必要的重计算：如果该变量频繁变化但回调依赖的核心变量（比如示例中的a/b）未改动，会导致useMemo频繁触发，失去缓存意义。
• 会触发ESLint的react-hooks/exhaustive-deps规则报错，该规则是为了避免hooks依赖遗漏或冗余。

针对「模态框关闭时更新memoizedValue」的优化方案 #

你的实际需求是仅在模态框关闭时触发重计算，直接把showModal加入useMemo依赖会导致「打开模态框时也触发重算」，属于冗余触发。推荐两种更精准的实现方式：

方案1：在关闭回调中直接更新状态（无需useMemo） #

如果memoizedValue不需要实时同步a/b的变化，仅在模态框关闭时计算一次，可直接在关闭回调中更新状态：

const [showModal, setShowModal] = useState(false);
// 初始化时计算一次初始值
const [memoizedValue, setMemoizedValue] = useState(() => calculateNewValueWhenModalCloses(a, b));

const handleCloseModal = () => {
  setShowModal(false);
  // 关闭模态框时直接计算并更新值
  setMemoizedValue(calculateNewValueWhenModalCloses(a, b));
};

const handleOpenModal = () => {
  setShowModal(true);
};

优势：代码意图清晰，完全符合hooks依赖规则，无不必要的重渲染。

方案2：用自定义触发信号结合useMemo（需实时同步a/b变化） #

如果memoizedValue需要实时反映a/b的变化，同时在模态框关闭时强制刷新，可新增一个专门的触发状态：

const [showModal, setShowModal] = useState(false);
// 用数字作为触发信号，每次更新都会改变引用
const [refreshTrigger, setRefreshTrigger] = useState(0);

const memoizedValue = useMemo(() => {
  return calculateNewValueWhenModalCloses(a, b);
}, [a, b, refreshTrigger]); // 依赖核心变量+触发信号

const handleCloseModal = () => {
  setShowModal(false);
  // 更新触发信号，强制useMemo重算
  setRefreshTrigger(prev => prev + 1);
};

const handleOpenModal = () => {
  setShowModal(true);
};

优势：依赖数组中的变量均符合语义（触发信号作为明确的重算标记），精准控制重算时机，不会触发ESLint报错。

不推荐你提到的useEffect+useState方案 #

该方案会导致额外的渲染（先渲染旧值，再通过useEffect触发更新渲染新值），代码冗余且不符合按需更新的原则，除非有特殊场景，否则不建议使用。

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