hoping someone can help lead me in the right direction with this or point to me to any docs/learnings that might be helpful.
I have two React components:
<Widget/>
<Modal/>
When <Widget/> mounted, <Modal/> is hidden (and vice-versa) using conditional rendering and the same boolean in my ShowModal state value (this boolean gets switched by a button). I made a simplified CodeSandbox for this example here
Where I am getting stuck is I have an async function takeScreenShot() which needs to run after <Widget/> is unmounted completely and before <Modal/> is mounted. Neither <Widget/> (just unmounted) nor <Modal/> (about to mount) should be visible in the DOM when takeScreenShot() is called. I need to make sure this is the case because I am taking a screenshot of the underlying page where I do not want to include either of the components in this. In my CodeSandbox example the output of my screenshot function would render a the gray background without showing the blue or red box
What I have tried
I have tried running a cleanup function in the useEffect hook in the <Widget/> component like so.
useEffect(() => {
return () => takeScreenShot();
}, []);
However it doesn't work because the cleanup function, similar to componentWillUnmount() runs right as the component is about to unmount, not fully unmounted from the DOM. This causes my screenshot to capture the un-mounting component in the image. Does anyone have an ideas to point me in the right direction on this?
Move the code from your App into the Modal so that it gets called when the Modal Loads for the first time. I removed all references to useEffect or useLayoutEffect, although the useLayoutEffect may still be required in the modal.