DEV Community

loading...

Discussion on: How to useEffect vs componentDid/Will-unmount

brohittv profile image
Rohit Pratti Author

Yeah lemme show you

Thread Thread
brohittv profile image
Thread Thread
brohittv profile image
Rohit Pratti Author

here is the code for close modal function that I wrote

and this works for all the modals except specifically this one

![thepracticaldev.s3.amazonaws.com/i...]

Thread Thread
pallymore profile image
Yurui Zhang • Edited

Right, so in your effect hook, the event listeners are never cleaned up.

you have something like this:

useEffect(() => {
  document.addEventListener('mousedown', (e) => {});

  return () => {
    document.removeEventListener('mousedown', () => {});
  };
}, []);

notice the arrow functions in both document.addEventListenerand removeEventListener calls - you are creating new functions on the fly.

when addEventListener is called here, a new function will be created, and provided as event handler.
when removeEventListener is called, again, another new function will be created, and provided as the reference to which function that needs to be removed from the listeners.

whenever we write () => {} we are creating a new function, and even if the code is exactly the same, javascript will treat them as totally different entities.

To fix this, we should only create the callback once, and pass the reference to that function to all 4 calls:

useEffect(() => {
  // create the event handler and save its reference to const closeModal
  const closeModal = (e) => {
    closeModalFunction(e, closePriceHistoryModal);
  };

  document.addEventListener('mousedown', closeModal); // pass reference to the call
  document.addEventListener('keydown', closeModal); // referencing the same function


  return () => {
    document.removeEventListener('mousedown', closeModal); // same reference
    document.removeEventListener('keydown', closeModal); // same reference
  };
}, [closePriceHistoryModal]);
Thread Thread
brohittv profile image
Rohit Pratti Author

Oh I see... this is the callback you were talking about!!! amazing... the weird thing is it only happens to this specific modal so I didnt notice until now! Let me try this and get back to you

Thread Thread
brohittv profile image
Rohit Pratti Author

AMAZING IT WORKED I added the key down option too.. WOW this lesson was awesome thank you so much... if you ever want free mcdonalds or food I gotchu my friend!

Forem Open with the Forem app