ZeeCoder / use-resize-observer

Hi,

I am using this hook in one of my projects in conjunction with React 18 and Strict Mode. However, it appears that the hook does not report any values when used together with React Strict Mode.

See the following CodeSandbox for a demonstration of this issue.

This issue is caused by the fact that React Strict Mode renders components twice in development mode in order to detect problems. In particular, this behavior causes problems with the following logic (for tracking unmounts):

use-resize-observer/src/index.ts

Lines 196 to 200 in 653b0b9

    
           useEffect(() => { 
        
             return () => { 
        
               didUnmount.current = true; 
        
             }; 
        
           }, []);

Because the component is rendered twice, the component is marked as unmounted and no further size updates are reported by the hook.

I believe the following patch should resolve this issue:

  const didUnmount = useRef(false);
  useEffect(() => {
+   didUnmount.current = false;
    return () => {
      didUnmount.current = true;
    };
  }, []);

Thank you for the reproduction and the detailed report. 🙏
I plan to do a release soon, just have to update the tests so that they run for at least React 17 and 18 to ensure compatibility.

Awesome, let me know if I can be of any help :)

Any update on that one? ^^ 🙏

Hopefully I'll have some time this weekend to wrap things up 🤞

🎉 This issue has been resolved in version 9.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

	useEffect(() => {
	return () => {
	didUnmount.current = true;
	};
	}, []);

No values reported when using React StrictMode