React自定义useUser Hook依赖token不触发useEffect问题排查

1. useToken返回的token是引用类型且未正确更新 #

如果useToken返回的是对象（比如{ token: 'xxx' }），每次更新时若仅修改对象内部属性却未创建新对象，React会判定引用未发生变化，不会触发依赖更新。示例：

// 错误写法：修改原对象，引用不变
const useToken = () => {
  const [tokenObj, setTokenObj] = useState({ token: '' });
  const updateToken = (newToken) => {
    tokenObj.token = newToken; // 直接修改原对象
    setTokenObj(tokenObj);
  };
  return { token: tokenObj.token, updateToken };
};

正确做法是返回新引用：

// 正确写法：创建新对象
const updateToken = (newToken) => {
  setTokenObj({ ...tokenObj, token: newToken });
};
// 或直接存储字符串类型的token
const [token, setToken] = useState('');

2. 遭遇闭包陷阱导致获取旧token值 #

useUser内部若存在闭包捕获旧token的情况，即使token更新，依赖项检测到的仍是旧值。示例：

// 错误写法：闭包锁定旧token
const useUser = () => {
  const { token } = useToken();
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser(token).then(setUser);
  }, [token]);
  
  // 该函数引用了旧token
  const refreshUser = () => {
    fetchUser(token).then(setUser);
  };
  
  return { user, refreshUser };
};

解决方式：用useRef保存最新token：

const tokenRef = useRef(token);
useEffect(() => {
  tokenRef.current = token;
}, [token]);

// 后续使用tokenRef.current获取最新值

3. useToken的token更新未触发组件重渲染 #

若useToken内部未正确调用setState，或setState传入的值与当前状态完全一致，React会跳过重渲染。比如：

// 错误：设置与当前值相同的token，React跳过更新
setToken(currentToken);

检查useToken的更新逻辑，确保token变化时调用setState并传入新值。

4. 依赖项拼写错误或未正确关联 #

检查useUser中useEffect/useMemo的依赖数组，是否存在拼写错误（比如把token写成tokne），或依赖项未包含实际用到的token变量。

5. token值未实际发生变化 #

若token更新后的值与之前完全一致，React会判定依赖项无变化，不会触发useEffect或useMemo。可在useToken的更新逻辑中添加日志，确认token确实被修改为新值。

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