Correct usage with React? (OR) SafeEmitter fires old events

[subvertallchris]

Hello! I feel like maybe I'm doing something wrong because I'm seeing some unexpected behavior.

I have a React component that needs to be informed of emitted actions. I setup a simple SafeEmitter that emits an action when an external event occurs. This emitter is subscribed to from within a React useEffect hook that calls a callback function. It goes a little something like this:

• Component mounts, calls hook function which sets emitter.on(cb)
• Events occur, 1 event results in 1 emitted action and 1 cb()
• Component unmounts, callback is expected to be GCed here
• Component mounts again, calls hook function again which sets emitter.on(cb) with a new version of cb
• EXPECTED BEHAVIOR: 1 event results in 1 emitted actions and 1 call to the updated cb()
• ACTUAL BEHAVIOR: 1 event results in 2 emitted actions and 2 calls to each of the versions of cb() -- it never GCs the first one

If the component mounts and unmounts ten times, it will call each of the ten versions of the callback function -- they will never be garbage collected.

Am I using it wrong? I don't see an explicit unlisten action for SafeEmitter, it seems pretty straightforward.

Apologies for how React-specific this is. I thought about trying to make a Sandbox to demonstrate it but thought I'd ping you about it first to see if anything quick jumps to mind.

Thank you!

[subvertallchris]

An effective workaround appears to be to wrap any callbacks fed to the emitter in a mutable ref that gets cleared on unmount. A simple version of that could look like this.

const useExternalNotfication = (cb: () => void) => {
  const cbRef = useRef<null | (() => void)>(cb);

  useEffect(() => {
    cbRef.current = cb;
  }, [cb]);

  useEffect(() => {
    singletonThatIsConnectedToExternalService.emitter.on(() => {
      if (cbRef.current) {
        cbRef.current();
      }
    });
    return () => { cbRef.current = null };
  }, []);
};

I don't love this but it's not the end of the world if it has to be like this. I'd still appreciate your thoughts and advice.

[mothepro]

Hi! Thanks for the descriptive behavior. However, there seems to be some confusion on GC.
A component unmounting is not the same as ready for garbage collection.

React Unmount means the framework is removing the object from view and may clean up later
Garbage Collection happens when a non primitive variable no longer has any references. The JS engine can now safely remove it from memory.

You are correct, that SafeEmitters do not have a way to remove themselves as a listener.

Easy workaround is to verify that the component is mounted before running the real cb().

I'm not 100% confident in my React, but your workaround does seems to do the trick.
Another option is to use a SafeEmitter<Reference>, or do not call useExternalNotification each time it is mounted, rather only during construction.

Hope this helps! I'm open to bouncing ideas around to improve the library if needed.