React+Firestore项目：useSyncExternalStore与useEffect用法及优势疑问

一、useSyncExternalStore 对比 useEffect 的核心优势 #

• 适配React并发模式：useEffect作为副作用钩子，在并发渲染场景下容易出现数据不一致、重复订阅/取消订阅的竞态问题；而useSyncExternalStore是React专为外部状态同步设计的API，能在并发更新时保证数据一致性，规避这类问题。
• 自动管理订阅生命周期：无需手动在useEffect的清理函数中编写取消订阅逻辑，useSyncExternalStore会根据组件挂载状态自动处理订阅的创建与销毁，减少手动编码错误。
• 精准控制渲染触发：外部状态变化时，React可通过getSnapshot精准判断是否需要触发组件重渲染，相比useEffect结合useState的写法，能避免不必要的渲染开销。
• 服务端渲染(SSR)友好：useSyncExternalStore的getSnapshot方法可在SSR阶段直接获取当前状态，而useEffect在SSR阶段不会执行，能避免客户端与服务端渲染内容不一致的问题。

二、两种写法的正确性与区别分析 #

第一种写法：全局共享状态版 #

const useFirestore = () => {
  const store = useSyncExternalStore(firebaseStore.subscribe, firebaseStore.getSnapshot);
  return store;
};

let data: string;
const firebaseStore = {
  getSnapshot: () => {
    return data;
  },
  subscribe: (callback: () => void) => {
    const unsub = onSnapshot(doc(db, "my-collection", "my-document"), (doc) => {
      data = doc.data().someData;
      callback();
    });
    return unsub;
  },
};

• 问题点：全局变量data会被所有使用useFirestore的组件共享，若后续扩展为订阅不同文档，全局data会被覆盖，导致所有组件拿到错误数据，扩展性极差。
• 适用场景：仅适用于全局唯一的单一文档订阅场景，不具备通用价值。

第二种写法：组件隔离状态版 #

const useFirestore = () => {
  const [data, setData] = useState();

  const getSnapshot = () => {
    return data;
  };

  const subscribe = (callback: () => void) => {
    const unsub = onSnapshot(doc(db, "my-collection", "my-document"), (doc) => {
      setData(doc.data().someData);
      callback();
    });
    return unsub;
  };

  const store = useSyncExternalStore(subscribe, getSnapshot);
  return store;
};

• 正确性：写法合规，每个组件实例拥有独立的data状态，不会出现状态共享冲突问题。
• 优化点：setData和callback会重复触发更新，其实useSyncExternalStore调用callback后会通过getSnapshot获取最新状态，无需用useState存储，改用useRef可避免多余渲染：

  const useFirestore = () => {
    const dataRef = useRef<string>();
  
    const getSnapshot = () => {
      return dataRef.current;
    };
  
    const subscribe = (callback: () => void) => {
      const unsub = onSnapshot(doc(db, "my-collection", "my-document"), (doc) => {
        dataRef.current = doc.data().someData;
        callback();
      });
      return unsub;
    };
  
    return useSyncExternalStore(subscribe, getSnapshot);
  };
  

• 核心区别：第一种是全局共享状态，第二种是组件隔离状态，后者更符合React组件封装性要求，适配绝大多数业务场景。

三、总结 #

• 优先选择useSyncExternalStore替代useEffect订阅Firestore，尤其在并发模式、SSR或需要精准控制渲染的场景下。
• 避免使用全局变量共享外部状态的写法，采用组件内独立状态（推荐用useRef存储）的写法更安全、可扩展。

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