🔸 TLDR ✅
▪️ useWindowSize returns the current [width, height] and updates on every browser resize.
▪️ Perfect for responsive UI logic when CSS alone isn’t enough. 📱➡️🖥️
🔸 THE HOOK SNIPPET 🧩
🔸 WHY IT’S USEFUL 🎯
▪️ Toggle layouts (drawer vs sidebar)
▪️ Conditionally render components based on width
▪️ Resize charts/grids dynamically 📊
▪️ Build adaptive UX without spreading listeners everywhere
🔸 GOTCHAS TO KNOW ⚠️
▪️ SSR (Next.js): window doesn’t exist on the server → guard it.
▪️ Performance: resize fires a lot → throttle/debounce if you do heavy work.
🔸 TAKEAWAYS 🧠
▪️ Centralize resize logic in one reusable hook ✅
▪️ Always cleanup event listeners (you did it right) 🧼
▪️ For production: add SSR safety + optional throttle
What’s your #1 use case for useWindowSize? 👇
#React #JavaScript #Frontend #Hooks #ResponsiveDesign #WebDevelopment #UI #SoftwareEngineering #CleanCode
🏆 Thrive at React job interviews: https://www.udemy.com/course/react-reactjs-questions-and-answers-2023-job-interviews/?referralCode=C52F8C70EFA5555C18AC