Logo
← Back to home

Window Tracker

Desktop Design

Window Tracker 1
Overview: Toggleable Component: The main App component manages a show state to conditionally render the WindowTracker component with a button toggle. Real-time Window Width Tracking: The WindowTracker component initializes state with window.innerWidth and listens for window resize events. Event Handling with Cleanup: Using useEffect, it sets up a resize event listener to update the window width state whenever the browser window is resized. The listener is cleanly removed on component unmount to prevent memory leaks. Live Display: The current window width is displayed inside an <h1>, updating instantly as the window size changes. Technologies & Concepts: - React functional components - useState and useEffect hooks - Event listeners and cleanup functions - Conditional rendering based on component state
Live Demo