3 years ago

The https://reactjs.org/docs/hooks-effect.html hook in React.js is the one that you would be using to run side effects for a particular component. For instance, if you want to run some side-effects only once every time a component renders (or in other words when the component mounts), here’s how you can do it.

This should work fine but consider the following scenario where you would render a dialog when the component renders.

To mitigate this, we can write a cleanup function in this useEffect that closes the dialog instance.

useEffect(() => { const dialog = dialogRef.current; dialog.showModal(); // the cleanup function return () => dialog.close(); }, []); The explanation