React自定义useCookie hook状态更新后组件未即时重渲染问题

自定义Hook的状态是组件级隔离的，每次在不同组件中调用useCookie，都会生成完全独立的useState状态副本，各副本之间没有任何关联。
你在业务组件中调用setValue修改Cookie时，只会触发当前业务组件自身的状态更新，虽然Cookie值确实已经写入浏览器，但头部购物车组件中useCookie持有的状态还是初始化时读取的旧值——没有任何通知机制告诉它“对应Cookie已经更新，需要重新读取”，因此只有手动刷新页面、组件重新走状态初始化逻辑时，才能拿到最新的Cookie值。
原代码还有一处冗余逻辑：new Cookies()写在Hook内部，每次组件渲染都会创建新的Cookies实例，属于不必要的性能开销。

核心是给所有useCookie实例增加跨组件的更新通知机制，最轻量化的实现是通过浏览器自定义事件做全局广播：任意位置修改Cookie时，派发全局更新事件，所有使用useCookie监听对应key的组件收到事件后，同步更新自身状态即可。
修正后的Hook代码如下：

import { useEffect, useState } from 'react';
import Cookies from 'universal-cookie';

// 全局唯一Cookies实例，避免重复创建
const cookies = new Cookies();
// 全局Cookie更新事件名
const COOKIE_UPDATE_EVENT = 'global-cookie-update';

const useCookie = (key, _options = {}) => {
  const [item, setItemValue] = useState(() => cookies.get(key) ?? 0);

  // 组件挂载时监听全局Cookie更新事件
  useEffect(() => {
    const syncCookieValue = (e) => {
      if (e.detail.key === key) {
        setItemValue(e.detail.value);
      }
    };
    window.addEventListener(COOKIE_UPDATE_EVENT, syncCookieValue);
    return () => window.removeEventListener(COOKIE_UPDATE_EVENT, syncCookieValue);
  }, [key]);

  const setValue = (value, options) => {
    // 兼容函数式更新写法
    const nextValue = typeof value === 'function' ? value(item) : value;
    setItemValue(nextValue);
    cookies.set(key, nextValue, options);
    // 广播更新事件，通知所有使用该key的Hook实例同步状态
    window.dispatchEvent(new CustomEvent(COOKIE_UPDATE_EVENT, {
      detail: { key, value: nextValue }
    }));
  };

  const removeItem = () => {
    cookies.remove(key);
    setItemValue(0);
    window.dispatchEvent(new CustomEvent(COOKIE_UPDATE_EVENT, {
      detail: { key, value: 0 }
    }));
  };

  return [item, setValue, removeItem];
};

export default useCookie;

替换后原有调用逻辑不需要改动，同时新增了几个优化点：

• 全局仅维护一个Cookies实例，消除重复创建实例的冗余开销
• 兼容函数式更新写法，更新值时可直接传入回调拿到当前最新值，避免闭包陷阱，写法示例：setCartCount(prev => (parseInt(prev, 10) + 1).toString())
• 所有监听同一个Cookie key的组件会实时同步状态，修改后无需刷新页面即可展示最新值

如果项目中已经接入了React Context、Zustand、Redux这类全局状态方案，也可以把Cookie值同步到全局Store中，所有组件统一从Store读取值，本质也是实现跨组件状态同步，适合复杂度更高的项目场景。

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