useElementSize doesn't pickup initial width of auto-width div

[CarlosNZ]

I'm setting a Video container height based on vh and letting the width be automatic. Then I'm trying to use useElementSize to detect the calculated width and use this width on other elements. However, width is returned undefined on first render, so the other components start with 0 width. They come right if I re-size the window forcing a re-render, but I can't get them to work initially.

e.g

 const [videoRef, { width: vidWidth, height }] = useElementSize()

...

// returning...:
<div id="player-wrapper" ref={videoRef} style={{ height: '50vh' }}>
// ...video component
</div>

// Other components
<div style={{width: vidWidth }}>
// This component starts with 0 width, would like it to match the above width
</div>

Any idea how to trigger a refresh of width based on the actual width of "player-wrapper"?

[juliencrn]

Try it with the brand new useResizeObserver