Rerender View on Browser Resize with React

Rerender view on browser resize with React

React is a popular JavaScript library for building user interfaces. One common requirement in web development is to rerender a view when the browser window is resized. In this blog post, we will explore different solutions to achieve this using React.

Solution 1: Using the window.addEventListener method

The simplest way to rerender a view on browser resize is by using the window.addEventListener method to listen for the resize event. We can then update the state of our React component when the event is triggered.

{`import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    
      Window width: {windowSize.width}
      Window height: {windowSize.height}
    
  );
};

export default MyComponent;`}

In this solution, we use the useState hook to store the window size in the component’s state. We also use the useEffect hook to add and remove the event listener when the component mounts and unmounts respectively.

Solution 2: Using a custom hook

If you find yourself needing this functionality in multiple components, you can create a custom hook to handle the window resize event. This allows for reusability and cleaner code.

{`import React, { useState, useEffect } from 'react';

const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return windowSize;
};

const MyComponent = () => {
  const windowSize = useWindowSize();

  return (
    
      Window width: {windowSize.width}
      Window height: {windowSize.height}
    
  );
};

export default MyComponent;`}

In this solution, we extract the window resize logic into a custom hook called useWindowSize. This hook can be used in any component to get the window size and rerender the view when it changes.

Conclusion

Rerendering a view on browser resize is a common requirement in web development. With React, we can achieve this by using the window.addEventListener method or by creating a custom hook. Both solutions allow us to update the state of our components and rerender the view accordingly.

Remember to clean up the event listener when the component unmounts to avoid memory leaks.

Rerender View on Browser Resize with React