React Measure is only called for first time

[emonno13]

I have an issue with the height of the scroll change.

Step 01: I load the page.

• Topbar is shown
• Height: 426
• Show scroll
  

Step 02: Click a button to hide the top bar.

• React Measure work
• Height: 491
• Show scroll
  

Step 03: Click a button to show the top bar again.

• React Measure does not work
• Height: 491 ( must be 426 )
• Scroll is clipped
  

I don't know why React-measure did not trigger when the top bar is shown again.

Here is my code:

[souporserious]

Hm I'm not sure why the ResizeObserver wouldn't be picking this up 🤨 maybe due to children being virtualized. I'm pretty busy right now so I won't be able to look into the library itself for a bit, but I think you should be able to grab a ref to the Measure component and call the internal measure method yourself to update the dimensions:

function App() {
  const ref = React.useRef()
  return (
    <div>
      <button onClick={() => ref.current.measure()}>
        Measure programmatically
      </button>
      <Measure ref={ref}>...</Measure>
    </div>
  )
}