search

ZeeCoder / use-resize-observer

A React hook that allows you to use a ResizeObserver to measure an element's size.
MIT License
644 stars 42 forks source link

Does not work with conditional rendering #43

Closed prjanja closed 3 years ago

prjanja commented 4 years ago

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 commented 4 years ago

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

ZeeCoder commented 3 years ago

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