Window height not instantly available after fullscreen

[heytulsiprasad]

I want to detect the window innerHeight once the fullscreen mode is enabled so I was passing the code inside the onchange handler for FullScreen component but that doesn't seem to work.

Ex:

 <FullScreen
      handle={fullscreenHandle}
      onChange={(state) => {
        // handle key press to exit full screen
        if (state !== fullScreen) setFullScreen(state);
        console.log('window height changed to: ', window.innerHeight);
      }}>

The above code doesn't detect any change in innerHeight, however if I wrap the console log inside a setTimeout and give it a small waiting time, it shows the correct value on fullscreen enabled.

     setTimeout(() => {
          console.log('window height changed to: ', window.innerHeight);
        }, 50);

Why is there an anomaly?

And more over what's a good way to detect fullscreen change across the browser, I've tried fullscreenchange event listener it doesn't work in chrome and using react-fullscreen's handler I'm unable to detect when user goes directly to fullscreen by pressing F11.