Rerender view on browser resize with React

by

Using React Hooks:

You can define a custom Hook that listens to the window resize event, something like this:

import React, { useLayoutEffect, useState } from 'react';

function useWindowSize() {
  const [size, setSize] = useState([0, 0]);
  useLayoutEffect(() => {
    function updateSize() {
      setSize([window.innerWidth, window.innerHeight]);
    }
    window.addEventListener('resize', updateSize);
    updateSize();
    return () => window.removeEventListener('resize', updateSize);
  }, []);
  return size;
}

function ShowWindowDimensions(props) {
  const [width, height] = useWindowSize();
  return <span>Window size: {width} x {height}</span>;
}

The advantage here is the logic is encapsulated, and you can use this Hook anywhere you want to use the window size.

Using React classes:

You can listen in componentDidMount, something like this component which just displays the window dimensions (like <span>Window size: 1024 x 768</span>):

import React from 'react';

class ShowWindowDimensions extends React.Component {
  state = { width: 0, height: 0 };
  render() {
    return <span>Window size: {this.state.width} x {this.state.height}</span>;
  }
  updateDimensions = () => {
    this.setState({ width: window.innerWidth, height: window.innerHeight });
  };
  componentDidMount() {
    window.addEventListener('resize', this.updateDimensions);
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions);
  }
}

More Related Contents:

  1. Build an HTML table using React from arrays [closed]
  2. How to delete an item from state array?
  3. ReactJS – Does render get called any time “setState” is called?
  4. How can I use multiple refs for an array of elements with hooks?
  5. Is it safe to store a JWT in localStorage with ReactJS?
  6. React Router with optional path parameter
  7. npm start error with create-react-app
  8. How to pass in a react component into another react component to transclude the first component’s content?
  9. ReactJS and images in public folder
  10. Deprecation notice: ReactDOM.render is no longer supported in React 18
  11. In React, what’s the difference between onChange and onInput?
  12. ESLint with React gives `no-unused-vars` errors
  13. Multiple Nested Routes in react-router-dom v4
  14. React JS onClick event handler
  15. React.createClass vs. ES6 arrow function
  16. Is it an anti-pattern to define a function component inside the render() function?
  17. In React.js should I make my initial network request in componentWillMount or componentDidMount?
  18. How to avoid extra wrapping in React?
  19. In Firebase when using push() How do I get the unique ID and store in my database [duplicate]
  20. React.js this.props.data.map() is not a function
  21. How to use setState inside callback: ReactJS
  22. How to get selected value of a dropdown menu in ReactJS
  23. Why useEffect running twice and how to handle it well in React?
  24. using history with react-router-dom v6
  25. Trying to use React.DOM to set body styles
  26. Dynamically Rendering a React component
  27. How to have nested loops with map in JSX?
  28. Performance penalty of creating handlers on every render with react-hooks
  29. Function inside functional component in React hooks – Performance
  30. How to programmatically fill input elements built with React?

Leave a Comment