In an ESModule, will not cleaning up subscriber result in a memory leak?

[xsjcTony]

As mentioned above, I created a subscriber in an ESModule, and I don't know exactly when I don't need that subscriber any more, hence there's no cleanup. Will this result in a memory leak if the module is no longer used?

[dai-shi]

Can you elaborate what you mean by creating a subscriber? A code snippet may help.

[xsjcTony]

As you can see, I have to define the state outside the component for some specific reason, and I created a listener for it for reactivity. But later on when this component is unmounted, I'm not sure whether not cleaning up this listener will cause memory leak (Although it should be trivial at all, just curious).

Later this component may be mounted again, and since the ESModule will only run once, I guess I should not clean it up on unmount.

Or should I put the subscribe logic and cleanup into the useEffect hook to make it follow the component lifecycle?

import useMyStore from '...';

// I have to define it outside of the component for some reason
let ids = useMyStore.getState().ids;
useMyStore.subscribe(({ ids: _ids }) => { ids = _ids; });

const MyComponent: JSX.Element => {
  // react component
  // will update "ids" inside
}

export default MyComponent;

[dai-shi]

You can subscribe it outside, but you should unsubscribe if possible. Otherwise, it can cause memory leak.

const unsubscribe = useMyStore.subscribe(({ ids: _ids }) => { ids = _ids; });
// call unsubscribe() when done

[xsjcTony]

I guess I'll put in the useEffect, since in my specific case seems it should follow the component lifecycle even if it's defined outside. When writing vanillaJS, I can't think of a way to unsubscribe when you have no idea about the exact logic for when to unsubscribing.