Initial render is delayed by 50ms, or the value of resize.debounce

[Mike-Dax]

Likely due to the way react-use-measure creates a debouncer, r3f canvases delay their initial render by the scroll debounce duration, which is by default 50ms. I would have thought a useLayoutEffect call would be required to get the initial size? It seems react-use-measure is currently relying on a quirk of the observers calling the callback after the initial delay.

In any case, child components aren't rendered until after this initial delay, so if any data fetching happens in them, that is delayed by this duration.

For example under default settings, the initial timer reports 85 ms.

import { Canvas } from '@react-three/fiber'

export default function App() {
  console.time('initial')

  return (
    <Canvas>
      <Component />
    </Canvas>
  )
}

function Component() {
  console.timeEnd('initial')

  return null
}

Setting it to 0ms reduces the initial timer reporting to 35 ms:

// ...
      resize={{
        debounce: 0
      }}>
// ...

In an extreme example, setting debounce to 10 seconds results in the initial timer reporting 10 seconds.

// ...
      resize={{
        debounce: 10000
      }}>
// ...

This seems to be dependent on the scroll debounce regardless of whether scroll is set to true or false.

// ...
      resize={{
        scroll: false, debounce: { scroll: 5000, resize: 0 }
      }}>
// ...

For example, the above results in a delay of 5 seconds which is counter-intuitive.

Ideally the r3f canvas is rendered as soon as possible, and the debounce is created with the immediate setting being true, and only subsequent calls are debounced, in case the resizing / scroll happens in 'one go'.

[clementroche]

I think that's because react-use-measure is based on ResizeObserver which runs its callback a frame after its initialization. One solution would be to call getBoundingClientRect immediately when element is binded.