Align useResizeObserver with EuiResizeObserver component behavior

[drewdaemon]

Describe the bug
I'm not sure if this is a bug, but the discrepancy can be seen on the docs page.

Both EuiResizeObserver and useResizeObserver give initial container dimensions, but they are always [0, 0] for useResizeObserver.

correct initial dimensions

incorrect initial dimensions

Impact and severity
This isn't directly impacting an end user. There is a workaround—get the initial size from the ref in a useEffect hook. It works, but it would be much nicer to just have to worry about a single hook: useResizeObserver.

Environment and versions

• EUI version: v92.0.0, probably much older
• React version: 11.11
• Browser: Brave
• Operating System: OSX

To Reproduce
Look at the initial values show in the docs page.

Expected behavior
As soon as the ref is populated, useResizeObserver should return its initial dimensions.

[JasonStoltz]

Thanks for raising this issue. I changed the label to "feature request" since it has been this way for quite some time.

[cee-chen]

Hey @drewdaemon! After talking through the fix for this with @Juneezee, we realized that the issue/confusion is actually in our docs example. For useResizeObserver to correctly update on mount, consumers need to store their DOM ref in a useState (in order to trigger a rerender) and not in a useRef.

We've updated our docs example accordingly and added an inline comment to note that. We've left the source code alone to reduce breaking changes, and also to allow for devs who intentionally want useRef over useState (they may want to receive updates on resize event change only, and not on mount).

[drewdaemon]

@cee-chen awesome. Thanks for looking into this!