function useWindowSize() {
  // save in instance memory: [{ windowHeight, windowWidth }]
  const [{ windowWidth, windowHeight }, setWindowSize] = useState({
    windowWidth: window.innerWidth,
    windowHeight: window.innerHeight
  });

  // This will run after every render
  useEffect(() => {
    // Set new state
    const handleResize = () =>
      setWindowSize({
        windowWidth: window.innerWidth,
        windowHeight: window.innerHeight
      });

    window.addEventListener("resize", handleResize);

    // The "cleanup" function
    return () =>
      window.removeEventListener("resize", handleResize);
    };
  });

  return { windowHeight, windowWidth };
}

function WindowSize() {
  const { windowWidth, windowHeight } = useWindowSize();

  return (
    <p> The window is { windowWidth } x { windowHeight } </p>
  );
}