Resizing the window triggers more re-renders than needed

[axelboc]

I've been playing around with the resize prop of Canvas, and I noticed that when I pass something like resize={{ debounce: 100 }}, which is equivalent to { debounce: { scroll 100, resize: 100 } }, the canvas re-renders more often when I resize the window than when I resize the canvas' container in the DOM (i.e. I use react-reflex to create a resizable panel next to my canvas).

It seems that react-use-measure listens for both resize events on window and ResizeObserver events on the measured element. Since the canvas is resized when the window is resized, react-use-measure ends up triggering two renders: one from the window resize event and one from the ResizeObserver event that necessarily follows.

The work-around I found to have a more consistent debounce between resize and ResizeObserver is to pass resize={{ debounce: { scroll: 50, resize: <some much higher value> }} (note that the scroll value notably controls the debouncing of the ResizeObserver events).

If ResizeObserver is involved, there's no point in listening to other events. Would you consider switching to a hook than relies solely on ResizeObserver like use-resize-observer? Debouncing would have to be handled in R3F, but this is a good thing, in my opinion, as it brings more flexibility. For instance, perhaps R3F could allow users to throttle rather than debounce the renders on resize?