I am trying to use Modals using the new parallel and intercepting routes. I have a page where users can create an object consisting of multiple sub objects (like an album containing photos) and each sub object has its own page (/dashboard/photo/[id]).
I have gotten the modal setup working when disabling the functionality of the album creation page, i.e. static link to /dashboard/photos/1 works and pops up a modal for the photo, but the issue is I am using search params to store the state when building an album, and there are multiple useEffect hooks set up to read changes in these params and update the form state. I get this error when I uncomment these hooks: Cannot update a component (Router) while rendering a different component (AlbumBuilder). As far as I can tell, when the modal changes the url, one of these hooks in particular sees that the search param is null and attempts to push the default value to the url while the router is navigating. Additionally, the other use effect hooks which render the photos see that the relevant search params dont exist so the list which I want to stay rendered in the background disappears when the modal is open, and re renders after its closed. Is there any way to 'freeze' the original url/useEffect hooks when the modal opens? I am surprised I can't find anything about this as both storing state in search params and the new parallel/int routes to create modals seem like common concepts in next right now.