Pause React rerendering

Question

I have a React (and Material-UI) based web page, that does include a Babylon JS based 3D view.

I want the web page to be responsive (ie adapt to different window sizes).

But I also want the user to be able to click on a Babylon JS button (made via @babylonjs/gui/2D Button.CreateImageOnlyButton) in the 3D view to bring just the 3D view into fullscreen (and make the rest of the UI invisible). (The button can also be pressed in fullscreen to exit fullscreen mode)

function MainWindow({root}) {
    var desktopWidth = useMediaQuery('(min-width:1000px)');
    var listWidth = useMediaQuery('(min-width:600px)');
    if (desktopWidth) {
        listWidth = false;
        }
    var mobileWidth =  !(desktopWidth || listWidth);

    return <Fragment>
        {desktopWidth && <DesktopMain root={root} />}
        {listWidth && <ListMain root={root} />}
        {mobileWidth && <MobileMain root={root} />}
        </Fragment>;
    }

My problem is, that the MainWindow is rerendered when I enter fullscreen mode. Is there a way to pause the React rerendering while the 3D view is in fullscreen?

Answer 1

You can use shouldComponentUpdate and tell it to return false if you've entered fullscreen. Currently, the docs state that if shouldComponentUpdate returns false, the render method will be skipped. It doesn't prevent children from rendering, and it isn't guaranteed that it will prevent a re-render. The best way to prevent react from re-rendering is to not change the state or props.