React Redux自定义Hook中函数内外变量值不一致问题排查

问题原因解析 #

核心问题是JavaScript闭包特性导致的：
React自定义Hook每次渲染时，都会重新创建内部的removeNotif函数，这个函数会捕获当前渲染周期的notifications变量。当Redux中的notifications更新后，Hook会触发重新渲染，此时外部的notifications是最新值，但如果removeNotif被缓存（比如父组件用了React.memo未更新子组件、或函数被存在ref/定时器中），旧的removeNotif仍然持有它创建时的notifications引用，就会出现函数内外变量值不一致的情况。

临时方案的必要性分析 #

你的临时方案确实解决了问题，但完全没必要这么复杂。这套逻辑通过useState触发状态更新，再在useEffect中读取最新的notifications，本质是绕开闭包陷阱，但引入了额外的状态变量和副作用逻辑，大幅增加了代码复杂度和维护成本。

优化方案 #

推荐两种更简洁的解决思路：

方案1：用useCallback绑定正确依赖 #

通过useCallback包裹removeNotif，并将notifications加入依赖数组，确保每次notifications更新时，都会生成捕获最新值的新函数：

import { useAppSelector, useCallback } from "Redux/helpers";
import { selectAgentState } from "Redux/slices/agentSlice";

const useRemoveRoomNotif = () => {
  const notifications = useAppSelector((state) => selectAgentState(state).notifications);
  console.log("Outside function:", notifications);

  const removeNotif = useCallback((rid: string, markNotificationsAsRead) => {
    console.log("Inside function:", notifications);
    const ntf = notifications.filter((notif) => notif.roomID === rid && !notif.isRead);
    if (ntf.length !== 0) markNotificationsAsRead(ntf);
  }, [notifications]);

  return { removeNotif };
};

export default useRemoveRoomNotif;

注意：如果removeNotif被传递给子组件，建议给子组件加上React.memo，避免因函数频繁重建导致的不必要重渲染。

方案2：直接从Store获取最新值 #

如果不想让removeNotif因notifications变化而频繁重建，可以在函数内部直接从Redux Store获取最新状态，彻底避开闭包陷阱：

import { useAppSelector, useStore } from "Redux/helpers";
import { selectAgentState } from "Redux/slices/agentSlice";

const useRemoveRoomNotif = () => {
  const store = useStore();
  const notifications = useAppSelector((state) => selectAgentState(state).notifications);
  console.log("Outside function:", notifications);

  const removeNotif = useCallback((rid: string, markNotificationsAsRead) => {
    // 直接从Store获取最新的notifications
    const latestNotifications = selectAgentState(store.getState()).notifications;
    console.log("Inside function:", latestNotifications);
    const ntf = latestNotifications.filter((notif) => notif.roomID === rid && !notif.isRead);
    if (ntf.length !== 0) markNotificationsAsRead(ntf);
  }, [store]);

  return { removeNotif };
};

export default useRemoveRoomNotif;

这种方式的优势是removeNotif的引用始终稳定，不会因为notifications更新而变化，适合需要缓存函数的场景。

总结 #

初始问题的本质是闭包导致函数捕获旧变量引用，你的临时方案虽有效但冗余，推荐使用上述两种更简洁、易维护的优化方式。

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