preventing rerenders on change in windows height

Question

based on this, i can get the height and width of the window

but on change of height or width of the window, it causes rerenders, losing all data that has been previously entered

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

 function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowDimensions;
}



const { height, width } = useWindowDimensions();

this causes text input to lose focus and lose any data that may have been entered there

here is a video to see the effect on android https://photos.app.goo.gl/cadqLsnsmW46ZGDy6