How to re-render the React component when the browser is resized?

To re-render a React component when the browser is resized, you can use the useEffect hook and listen to the resize event via the window.addEventListener method. The useEffect hook allows you to perform side effects in function components, and the window.addEventListener method attaches an event listener to the window object.

Here is an example of how you can re-render a React component when the browser is resized:

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    function handleResize() {
      // Update the state or perform any other actions when the
      // browser is resized
    }

    // Attach the event listener to the window object
    window.addEventListener('resize', handleResize);

    // Remove the event listener when the component unmounts
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  // Render the component
  return <div>My component</div>;
}

In the example above, the useEffect hook is used to attach an event listener to the window object that listens for the resize event. When the event is triggered, the handleResize function is called. This function can be used to update the state of the component or perform any other actions that you want to happen when the browser is resized.

When the component unmounts, the useEffect hook will clean up the event listener by calling window.removeEventListener to remove the event listener from the window object. This ensures that the event listener does not continue to run and cause memory leaks.