Issue with Next.js ^14.0.2 in DEV environment about react-resize-detector HOT 5 CLOSED

Same issue for me as well. Also I noticed that if I make a change in the file where I have useReactDetector and nextjs dev server reloads on its own, then useReactDetector works and returns width. But when I then try to manually refresh or load the page it returns undefined every time. Like OP said this only happens in NextJS 14.0.2+, when I use 14.0.1 everything works.

from react-resize-detector.

I'm having the same issue as well, I'm using Next.js 14.0.3. I had to downgrade my Next.js project to 14.0.1 and it worked like a charm.

from react-resize-detector.

I've already opened an issue at nextjs vercel/next.js#58767

I have already debugged it a bit, here are my findings:

• it was introduced by a commit in nextjs which pulled react changes
• it is caused by the react strict mode, but only since nextjs v14.0.2, disabling it solves the problem or the prod build
• you can quick fix it in react-resize-detector by commenting this out:

return () => {
  // component is unmounted
  // clear ref to avoid memory leaks
  // setRefElement(null); // <= comment to quick-fix it
  onRefChange.current = null;
};

• It also seems that since v14.0.2 the setRefElement function is only called twice. The first time it sets the ref right, the second time it sets the ref to null, triggered by the code above. That's why commenting out that line works, because it can't set the ref to null.
• In v14.0.1 this function is called at least 3 or 4 times, I can't remember. But the important thing is that after setting it to null the second time, it gets set correctly the third time.

As a side note I am pretty new to the hole JS/TS ecosystem so I don't fully understand all of it, but that's are my findings. I hope they might help.

from react-resize-detector.

In version 9.1.1:

React's strict mode causes components to render twice in development, as described here: React StrictMode Documentation. This also means that the logic for mounting and unmounting in useEffect is executed twice.

However, there's an issue with ref callbacks: they are only triggered once before the first unmount. As a result, it's not possible to remove the reference to the DOM node during unmount because the reference is no longer accessible afterward.

During my tests, I observed no memory leaks even after removing part of the unmount logic. We still maintain the "observer" cleanup, and React handles the removal of DOM references from the state.

Please upgrade to version 9.1.1 and inform me if any issues persist.

from react-resize-detector.

@maslianok Please, take a look when you have time

from react-resize-detector.