feat(component): convert Modal to FC

[chanceaclark]

What

Convert Modal to functional component.

Till Hacktember Ends

[jordan-massingill]

I'm not fully clear on why a function is returned from this useEffect() - would you mind explaining?

[chanceaclark]

Returning a function on a useEffect is roughly the same as componentWillUnmount. A common use-case for using this cleanup functionality is removing event listeners on the DOM:

useEffect(() => {
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
});

This is extremely useful when components get added/removed from the DOM frequently.

Here's some more information on the effect cleanup: https://reactjs.org/docs/hooks-reference.html#cleaning-up-an-effect

---

In our use-case we want the users focus to return back to their last focusable element. We use portals to add the modal onto the page so it'll mount/unmount every time it open/closes. Since we want to return focus, we run it on the effect cleanup.

[jordan-massingill]

Oh thanks! I remember that now that you mention it. It's been a while since I've used the useEffect hook, will brush up on it again for my current work.

[jordan-massingill]

What is the difference between this and return isOpen && modalContainer ? createPortal(renderedContent, modalContainer) : null ?

[chanceaclark]

Good catch, I can change it over.