I was working on a project and I had to close out some modals, and realized there were both Class component modals and Functional component modals ...
For further actions, you may consider blocking this person and/or reporting abuse
Hi, in your code
handleClick
seems to depend onprops.closeAddItemModal
well first of allthis.props
probably does not work because it's a function component. Secondly ifcloseAddItemModal
changes it probably will cause issues in thisuseEffect
hook. It's probably better to add it as a dependency of the effect:OHHH AMAZING THANK YOU GOOD CATCH!
I see you've updated the code. I would move the definition of
handleClick
to the body of thatuseEffect
function (if it is not used elsewhere) so we won't be creating a newhandleClick
function on each render call. Also it's good to show that we are actually using the dependencies inside the hook directly.If
handleClick
is also used in other places, an alternative method to this is to combine this withuseCallback
So if
props.closeAddItemModal
doesn't change we won't be creating newhandleClick
funcs and ouruseEffect
hook will be safe.I'd highly recommend this eslint plugin if you haven't used it npmjs.com/package/eslint-plugin-re...
its only used for this functions, so I just move it above the click listener? :o
Yea I would do that. So the function is within the same block scope created by the effect.
React could render multiple times (with or without any state / prop changes), it's better to keep dependencies and the code where they are used close.
So I made a Util file, and I imported the function and then and callingback to it inside the useEffect, and this works for all my modals except one modal which crashes when I open and close it too many times... any ideas why this could happen?
could you share some code?
it sounds like that one modal might have some effects that are not cleaned up properly when closed.
Yeah lemme show you
![thepracticaldev.s3.amazonaws.com/i...]
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...]
Right, so in your effect hook, the event listeners are never cleaned up.
you have something like this:
notice the arrow functions in both
document.addEventListener
andremoveEventListener
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:
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
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!