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