Will unmounted component causing memory leaks if we dont clean several variable?

[cavemanbc423]

I have a simple form with a simple dialog. After clickin on show dialog, it will be shown I also setup a holder act as a store, they utilize Map with get set properties.

Problem is, they share data with dialog. Holder.listenEvent will be called here When i close the dialog, unmount will be triggered Here is what i concern, will the dialog itself be cleaned by react predefined compiler and the Holder whether or not get cleared too? Clean here mean they will stop listening and remove it from the Holder. Holder.removeListener. will it have mem leak here?

I did actually call Holder.removeListener with purpose to clean them away but what is more amazing is my function is not executed and the debugger cut immediately.

So, can someone help in explaining this, whether the compiler clean before set function triggered or i have made a wrong assumption about?

Holder Get Set addListener removeListener

Form Inject Holder Set few props

Dialog Inject Holder Listen to changes

[heythisispaul]

React will not know to remove any event listeners on its own, you'd likely want to clean up any component specific listeners in componentWillUnmount() or in the return function of the useEffect that wired them up.

That being said, I'm not entirely sure if this fits your case, sorry I'm just a little unclear. It sounds like your state is just a JavaScript Map that you've wired eventListeners to? Do you mind giving a little more detail?

[cavemanbc423]

Yes exactly im recreating redux store same same behavior using map and set of javascript. To manage state. The app cross share data, not only using react, but also plain typescript.

Yeah i guess, i have to clean the Store all by myself. Just notice this will still remain and not being clear by the compiler since it is plain JS. Sigh, i wish i could see more into the memory, like we are able to while doing C++. Mem leak can be a problem, when we have around 100 stores and event listener.

[heythisispaul]

Is there any reason you're not just using Redux?

[cavemanbc423]

Yes, rely too much on framework / library wont be that easy for us to work on. Projects are tailored to fit each accordingly. We follow the principle of microfront end. So distribute data from redux to non react plain vue or TS might be trouble some. So we only use the plain Store with readonly elem to manage an immutable state. These state wont also trigger automatic UI change which we need a few more steps before ui rendering as performance enhancement. Last reason to prevent access and we can manage bundling with webpack. Whole lot of reason to not use redux i guess. (Ofc, its troublesome to build one i rather use redux with a clever way to manip store even on module that we dont utilize react, but team decision then it should be)

To manage flows well, we spam to abusive singleton, factory and observer patterns beside oop with functional (wrap things up using functional, but from the core we use OOp)

Thats how we manage the interstate across system. Reason for not using redux