Does not work with conditional rendering

[prjanja]

Does not work correctly when using conditional rendering

When data is loaded asynchronously ref is not updated, which leads to empty size values

Example: https://codesandbox.io/s/hidden-sky-4g4rr

Maybe we should use a callback hook as described in the documentation: https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node ?

[ZeeCoder]

You can just set the ref object conditionally, when it's measurable:
https://codesandbox.io/s/damp-cookies-6bdrg?file=/src/App.js

[ZeeCoder]

You can now use callbackRef for this, or use one of the other solutions documented here:
https://github.com/ZeeCoder/use-resize-observer#observing-components-mounted-with-a-delay

This is live in the latest alpha release:
https://github.com/ZeeCoder/use-resize-observer/releases/tag/v6.2.0-alpha.1