JS
import { useState, useEffect } from "react";export default function useWindowSize() {const isClient = typeof window === "object";function getSize() {return {width: isClient ? window.innerWidth : undefined,height: isClient ? window.innerHeight : undefined,};}const [windowSize, setWindowSize] = useState(getSize);useEffect(() => {function handleResize() {setWindowSize(getSize());}window.addEventListener("resize", handleResize);return () => window.removeEventListener("resize", handleResize);}, []); // Empty array ensures that effect is only run on mount and unmountreturn windowSize;}
useWindowSize
When you need to determine the window size of the client on the fly in your JS code