react useSyncExternalStore

index.ts

import { useCallback, useRef, useSyncExternalStore } from "react";

const useThirdPartyStore = () => {
  const symbolRef = useRef(Symbol());
  const storeChangeRef = useRef<() => void>();
  const subscribe = useCallback((storeChange: () => void) => {
    storeChangeRef.current = storeChange;

    return () => {
      storeChangeRef.current = undefined;
    };
  }, []);
  const getSnapshot = useCallback(() => {
    return symbolRef.current;
  }, []);
  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);

  /**
   * when store change, call this function to rerender
   */
  const rerender = useCallback(() => {
    storeChangeRef.current?.();
    symbolRef.current = Symbol();
  }, []);
};