useSubscribeSuspend.js

import { Meteor } from 'meteor/meteor';
import { Tracker } from 'meteor/tracker';
import { useEffect } from 'react';

const hashSubscriptionArguments = (pubName, args) => EJSON.stringify([pubName, args]);

const contexts = new Map();

const getOrCreateSubscription = (pubName, args) => {
  const subHash = hashSubscriptionArguments(pubName, args);
  const exisitingContext = contexts.get(subHash);
  if (exisitingContext) exisitingContext;

  const context = {
    count: 0,
    ready: false,
    promise,
  };
  
  contexts.set(subHash, context)

  context.promise = new Promise((res, rej) => {
    context.sub = Meteor.subscribe(pubName, args, {
      onReady() {
        context.ready = true;
        res();
        // setup self-destruction in case component has been unmounted
        // while loading and hook has never been called
        context.destroyHandle = setTimeout(() => {
          context.sub.stop();
        }, 3000);
      },
      onStop(error) {
        if (error) {
          context.error = err;
          rej(error);
          // give 5s until we let a new request occur
          setTimeout(() => {
            contexts.delete(subHash)
          }, 5000);
        }
      }
    });
  })

  return context;
};

const useSubscribeSuspend = (pubName, args) => {
  if (!pubName) return;

  const subContext = getOrCreateSubscription(pubName, args);

  if (subContext.error) {
    throw subContext.error;
  }
  if (!subContext.ready) {
    throw subContext.promise;
  }

  useEffect(() => {
    clearTimeout(subContext.destroyHandle);
    subContext.count += 1;
    return () => {
      subContext.count -= 1;
      if (!subContext.count) {
        subContext.sub.stop();
      }
    };
  }, [subContext]);
};

export default useSubscribeSuspend;