Skip to content
This repository has been archived by the owner on Jun 3, 2020. It is now read-only.

Question: one vs multiple ResizeObserver(s) performance #59

Closed
william-lohan opened this issue Jul 25, 2018 · 1 comment
Closed

Question: one vs multiple ResizeObserver(s) performance #59

william-lohan opened this issue Jul 25, 2018 · 1 comment

Comments

@william-lohan
Copy link

william-lohan commented Jul 25, 2018

The ResizeObserver has an observe() method and an unobserve() method. This seems to encourage having one ResizeObserver instance and observing and unobserving different elements as needed with logic in the callback to handle each entity. Is there any performance implications of doing this vs instantiating multiple ResizeObservers for observing different elements or groups of elements?

@eeeps
Copy link

eeeps commented Jul 26, 2018

The recommended pattern is to use one ResizeObserver to observe multiple elements. @atotic looked into the performance gains of using one-vs-many ROs – they are dramatic: https://groups.google.com/a/chromium.org/d/msg/blink-dev/z6ienONUb5A/F5-VcUZtBAAJ

mlaursen added a commit to mlaursen/react-md that referenced this issue Nov 11, 2019
Updated the useResizeObserver to use `target` instead of `getTarget`.

Stopped using the "shared" ResizeObserver for additionl performance
since it lead to memory leaks when components unmounted. For some
reason, the `observer.unobserve` doesn't actually stop the handlers from
being called if it happened during a React unmount phase? The only way I
could prevent the memory leak warnings was to isolate the resize
observer to each useEffect and use `observer.disconnect()` which stops
*all** (1) observered targets. Using `observer.unobserve` would still
cause the memory leak warnings.

The downside to this is that it is less performant, but this was
probably a pre-mature optimiziation anyways.
WICG/resize-observer#59
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants