I think it is a bad practice to put a function inside a function since it will always be defined every render. I'm talking about the handler method in useMouseLocation custom hook.
Thanks for your comment and I completely agree with you here 😍.
As Dan Abramov says in his article that each render has its own event handler. I know this is applicable when your event handler consumes some state or props variable so that you don't end up storing the stale value (closures).
But here for the sake of ingesting this new knowledge of using hooks, I was setting up an initial mindset for my readers and direct their attention towards using the side effect inside useEffect hook. I didn't want to set opinion or emphasize on some best patterns. That could be a completely separate article 😀
I think it is a bad practice to put a function inside a function since it will always be defined every render. I'm talking about the handler method in useMouseLocation custom hook.
Hi Lougie,
Thanks for your comment and I completely agree with you here 😍.
As Dan Abramov says in his article that each render has its own event handler. I know this is applicable when your event handler consumes some state or props variable so that you don't end up storing the stale value (closures).
But here for the sake of ingesting this new knowledge of using hooks, I was setting up an initial mindset for my readers and direct their attention towards using the side effect inside useEffect hook. I didn't want to set opinion or emphasize on some best patterns. That could be a completely separate article 😀
Thanks again for reading this article. 👏
Moving the
handlerfunction insideuseEffectwould fix this nicely (and in fact I see you already did this in the demo).