How to re-render the view when the browser is resized?

To automatically update (re-render) a React component when the browser window changes size, you listen for the resize event on window, store the size in component state, and update that state inside an effect—triggering a re-render.

1. Track Window Dimensions 🖥️

   • Use useState to hold width and/or height (window.innerWidth, window.innerHeight).
   • Initial state is set from the current window size.

2. Listen for Resize Events 🎧

   • In useEffect, add a window.addEventListener('resize', handler) that updates your state with the new dimensions.
   • This handler runs on every resize, calling the setter to update state.

3. Cleanup to Prevent Leaks 🧹

   • Return a cleanup function from useEffect that removes the listener:

     JS

   • Ensures you don’t accumulate multiple listeners if the component mounts/unmounts.

4. Debounce for Performance (Optional) ⏱️

   • Rapid resize events can flood updates. You can wrap your handler in a debounce to limit how often state changes.