<div id="root"></div>

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}
.box {
  background-color: #f7df1e;
  width: 300px;
  h1 {
    font-weight: 900;
    font-size: 20px;
    margin: 0 0 1rem 0;
  }
}

const { useEffect, useState } = React;

function useWindowSize() {
  const [size, setSize] = useState([window.innerHeight, window.innerWidth]);
  useEffect(() => {
    const handleResize = () => setSize([window.innerHeight, window.innerWidth]);
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);
  return size;
}


const App = () => {
  const [height, width] = useWindowSize();
  return(
    <div className="box">
      <h1>useWindowSize Hook</h1>
      <p>
        height: {height}<br />
        width: {width}
      </p>
    </div>
  );
}

ReactDOM.render(<App />,
document.getElementById("root"))