Reading from Browser

Access window object and browser APIs safely in React

Intermediate

Core Concepts

The window object only exists in the browser, not on the server
Accessing window directly in your component will crash during server-side rendering
Use useEffect to safely access browser APIs (it only runs in the browser)
Always clean up event listeners to prevent memory leaks
Check typeof window !== 'undefined' if you need to access window outside useEffect

Live Demo

Window Width

---px

How It Works

1
Component mounts on the client
useEffect runs and reads window.innerWidth safely
2
Event listener is attached
window.addEventListener('resize', handleResize)
3
User resizes the browser window
The resize event fires
4
handleResize function runs
Updates width state with new value
5
Component unmounts: cleanup runs
Event listener is removed to prevent leaks

Code

import { useState, useEffect } from 'react';

function WindowWidthTracker() {
  const [width, setWidth] = useState(0);

  useEffect(() => {
    // Function to update width
    const handleResize = () => {
      setWidth(window.innerWidth);
    };

    // Set initial width
    setWidth(window.innerWidth);

    // Listen for window resize
    window.addEventListener('resize', handleResize);

    // CLEANUP: Remove listener when component unmounts
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // Empty array = only run once on mount

  return (
    <div>
      <h1>Window Width: {width}px</h1>
      <p>Resize your browser window!</p>
    </div>
  );
}

Common Browser APIs

window.innerWidth / innerHeight

Get viewport dimensions

window.scrollY

Get scroll position

localStorage / sessionStorage

Store data in browser

navigator.userAgent

Detect browser/device

useEffect