reactjs / react-transition-group

An easy way to perform animations when a React component enters or leaves the DOM
https://reactcommunity.org/react-transition-group/
Other
10.1k stars 652 forks source link

Freeze React node while transitioning in Next.js #902

Open ckull opened 1 month ago

ckull commented 1 month ago

I'm working on routing transition where previous node and current node are intersecting between with the set timeout around 2000ms. Everything seems perfect except that when routing all state in previous node has reset to initial state such as the scrollY has reset to 0 and all states and useEffect has been call once again. This cause me a lot of problems for example If I try to navigate from the Menu Drawer, all exiting node states get reset to initial state and menu drawer is disappear instantly. Are there any way to freeze and stop re-rendering the previous node while transitioning? I have found this react-freeze but have no idea how to freeze directly to the exiting node while transitioning.

onExit={(node) => { //freeze node and stop rerender }

https://github.com/reactjs/react-transition-group/assets/33544356/48c73165-297a-4e62-bab0-b2538b145edf