useTwo width / height not reacting to updates

[haxiomic]

Describe the bug

const { width, height, two } = useTwo();

If the two.js canvas resizes, i.e. through fit() or other, the width and height in useTwo() do not change and no re-render happens, however if you manually view two.width or two.height then this will reflect the correct latest size

To Reproduce
call two.fit(), in such a way as to trigger resize
see that no re-render happens

Expected behavior
width and height should be in sync and trigger react re-render

[haxiomic]

Quick workaround that auto-fits to the parent and returns latest size

function useTwoSize() {
  const { two } = useTwo();
  const [width, setWidth] = useState(two?.width ?? 0);
  const [height, setHeight] = useState(two?.height ?? 0);

  useEffect(() => {
    const container = two?.renderer.domElement?.parentElement?.parentElement;
    if (!container) return;
    let lastWidth = NaN;
    let lastHeight = NaN;
    let loopHandle: number;
    function frameLoop() {
      const changed = (lastWidth !== container.clientWidth) || (lastHeight !== container.clientHeight);
      if (changed) {
        two?.fit();
        two?.render();
        setWidth(two?.width ?? 0);
        setHeight(two?.height ?? 0);
        lastWidth = container.clientWidth;
        lastHeight = container.clientHeight;
      }
      loopHandle = requestAnimationFrame(frameLoop);
    }
    frameLoop();
    return () => cancelAnimationFrame(loopHandle);
  }, [two]);

  return { width, height };
}

[jonobr1]

Try the latest version v0.8.23 and I believe the width / height properties should re-hydrate correctly. Let me know if they don't

[haxiomic]

Ensured I'm on the latest but same issue

[jonobr1]

Try this version: https://www.npmjs.com/package/react-two.js/v/0.8.23-r.1 @haxiomic

[jonobr1]

I've updated your prototype with the latest version and resolved the issue there. But, for longterm support I'm going to deprecate fitted as a property in the <Canvas /> props. It creates a lot of ambiguity and weird edge cases that can be resolved by either discretely assigning the width and height of the canvas (a la react-three-fiber) or the fullscreen prop which is a shorthand way to make the canvas take up the whole browser window.

Thanks again for reporting!