hooks.js

import React, { useState, useEffect } from "react";

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

  return (
    <>
      <h2>Window size: {width} x {height}</h2>
    </>
  );
};

export default WindowSize;