Why is the Modal rendering the children on close?

[IonelLupu]

Take this project for example: https://stackblitz.com/edit/stackblitz-starters-ig6o49?file=src%2FApp.tsx,src%2Findex.tsx

If you open the modal and close it, you will notice the content of the modal being rendered twice: once when the modals opens and once when the modal closes. Why are the children rendered when the modal closes?

We are using reactQuery in a modal and re-rendering the children of the modal re-triggers the query function again. In our case, it makes API requests and re-triggering analytics. We can modify the staleTime for reactQuery, but I think the best solution is to no re-render the children on modal close at all.

Screen.Recording.2024-02-23.at.18.01.16.mov