# \[solved\] r3f: How to update plane scale to VideoTexture size after loading?

**URL:** <https://discourse.threejs.org/t/solved-r3f-how-to-update-plane-scale-to-videotexture-size-after-loading/45416>\
**Category:** Questions\
**Tags:** react-three-fiber\
**Created:** [December 2, 2022, 8:22pm UTC](https://discourse.threejs.org/t/solved-r3f-how-to-update-plane-scale-to-videotexture-size-after-loading/45416 "2022-12-02T20:22:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![thusman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thusman/32/18836_2.png) [@thusman](https://discourse.threejs.org/u/thusman)\
**Post date:** [December 2, 2022, 8:22pm UTC](https://discourse.threejs.org/t/solved-r3f-how-to-update-plane-scale-to-videotexture-size-after-loading/45416/1 "2022-12-02T20:22:21Z")

</div>

Hey, just getting started with react-three-fiber and I have issues understanding how the “data flows”. I have a plane and a VideoTexture, and want to update the plane size when the video was loaded. My r3f component looks like this:

```javascript
export function VideoPlane(props) {

    const [width, setWidth] = useState(1);
    const map = useVideoTexture(props.src, { 
        onloadedmetadata: function() {
            console.log('new width', this.videoWidth / this.videoHeight);
            setWidth(this.videoHeight / this.videoWidth);
        }
    });

    return (
        <mesh scale={[width, 1, 1]}>
            <planeGeometry />
            <meshBasicMaterial map={map} />
        </mesh>
    )
}

```

I see the correct width log but console gives warning: _Can’t perform a React state update on a component that hasn’t mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead._

I tried this a few different ways but always end up with the same errors. Any ideas? (I’m using [drei useVideoTexture](https://github.com/pmndrs/drei/blob/24c3cb2dd67ae8bf2893272abae1b50617987658/src/core/useVideoTexture.tsx))

---

<div class="post-metadata">

**Author:** ![thusman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thusman/32/18836_2.png) [@thusman](https://discourse.threejs.org/u/thusman)\
**Post date:** [December 2, 2022, 8:52pm UTC](https://discourse.threejs.org/t/solved-r3f-how-to-update-plane-scale-to-videotexture-size-after-loading/45416/2 "2022-12-02T20:52:59Z")

</div>

Okay this seems to work. I think react-suspend prevents VideoPlane from rendering until onloadedmetadata fires inside useVideoTexture, so I simply can read videoWidth and videoHeight. Feels like magic, i take it!

```javascript
const videoTexture = useVideoTexture(props.src, {});
const width = videoTexture.source.data.videoWidth / videoTexture.source.data.videoHeight;

```

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [December 2, 2022, 11:23pm UTC](https://discourse.threejs.org/t/solved-r3f-how-to-update-plane-scale-to-videotexture-size-after-loading/45416/3 "2022-12-02T23:23:14Z")

</div>

that’s how suspense works in general, yes. internally it actually throws, like an exception, passing the promise into reacts hands. react awaits it and continues rendering the component once it resolves. by then the result is there properties and all, no need for error checking etc.

ps, should you need it, there’s an aspect ratio css cover hook in drei: [GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber](https://github.com/pmndrs/drei#useaspect) if you want to run it fullscreen