Using this trick should be avoided and there is probably a better way. By opting in to use this trick you risk your application to break in production at a later date when React releases a feature called "Reusable state" Reusable state will allow for unmounting and remounting of components without losing state. React 18 introduces the double firing of useEffect in dev mode to prepare us for this upcoming change and stress test your components.
If your component is not behaving correctly in dev mode now. It wont behave correctly in production later!
It's important to update our mental models of how useEffect works from React 18 onwards as it is now subtly different. This video I found hugely helpful
Using this trick should be avoided and there is probably a better way. By opting in to use this trick you risk your application to break in production at a later date when React releases a feature called "Reusable state" Reusable state will allow for unmounting and remounting of components without losing state. React 18 introduces the double firing of useEffect in dev mode to prepare us for this upcoming change and stress test your components.
If your component is not behaving correctly in dev mode now. It wont behave correctly in production later!
reference - reactjs.org/blog/2022/03/29/react-...
It's important to update our mental models of how useEffect works from React 18 onwards as it is now subtly different. This video I found hugely helpful
youtube.com/watch?v=MXSuOR2yRvQ
Thanks for sharing the video link. It's really helpful.