Unsubscribe clean-up function in React

I am trying to setup the subscribe and unsubscribe behavior for a WAMP subscription using React functional components.

The first argument of the useEffect hook is a function that creates the subscription. This function should return a clean-up function that handles the unsubscribing.

This is what I would like to do:


  useEffect(()=>{

    

    session.subscribe('one', onOne).then(subscription => {

      const one = subscription

    })

    session.subscribe('two', onTwo).then(subscription => {

      const two = subscription

    })

   return(()=>{

    session.unsubscribe(one)

    session.unsubscribe(two)

  })

  }, [props.settings]);

Due to the async nature of subscribe() , one and two are set at some later time and thus they are undefined when the cleanup function is returned.

Has anyone had experience setting up clean-up functions for subscriptions with React functional components?

I have zero React knowledge, so I can’t comment on the specifics there.

however, depending on your needs, you might also use the WAMP Meta API

which is fully supported by Crossbar.io, eg here are examples:

Thank you for your reply, I will look into the Meta API

Here’s an outline of how I’ve done this kind of thing before. Obviously not tested, but hope it helps!

useEffect(() => {
    // other logic...

    let subs = [];

    session.subscribe('one', onOne).then(sub => subs.append(sub));
    session.subscribe('two', onTwo).then(sub => subs.append(sub));

    return () => subs.map(sub => session.unsubscribe(sub));
}, ...)