Shader breaking on window resize

[lsh]

Hi, I'm not really 100% sure about the best practices in React-Three-Fiber so some of the following may be a little off. I'm trying to set up a simple scene of just a camera looking at a plane with a shader on it, with the canvas having a max width for desktop, but being nearly full width on mobile. So far, every time I refresh or resize the page, the canvas turns black.

const MainObject = (props) => {
    const ref = useRef();
    const { size } = useThree();
    useFrame(() => {
        ref.current.material.uniforms.time.value += 0.05
        ref.current.material.uniforms.resolution.value = [size.width, size.height]
    });

    return (
            <mesh visible
                   ref={ref} >
                <planeBufferGeometry attach="geometry" args={[2,2]} />
                <shaderMaterial
                    attach="material"
                    fragmentShader={props.shader}
                    uniforms={{
                        resolution: {type: "v2", value: [size.width, size.height]},
                        time: {type: "f", value: 0},
                    }} />
            </mesh>
    );
}

export default ({ data }) => {
    // hook using useLayoutEffect() to get dimensions
    const [windowW, windowH] = useWindowDimensions();
    const w = Math.min(800, windowW * 0.9);
    const h = windowH * 0.75;
    // fragment shader being fed in
    const fragment = data.markdownRemark;

    return(
        <div>
            <Canvas style={{
                        width: `${w}px`,
                        height: `${h}px`,
                        background: "#000000"
                    }}
                    camera={{position: [0, 0, 1], viewport: [w, h]}}
                    gl2={true}>
                    <MainObject shader={fragment.rawMarkdownBody} />
            </Canvas>
        </div>
    );
}

Any help would be much appreciated, thanks! :)

[drcmda]

you dont need useWindowDimensions, the canvas stretches to 100% of the next relative/absolute parent. it would be better if size that one in css. as for shaders: #398 (comment)

[lsh]

Thank you! The thread solved my issue! :)