Реагировать | Как повторно отрендерить представление при изменении размера браузера?

В этой серии статей о React я поделюсь вопросами для интервью по React.
Не забывайте подписываться на меня, чтобы увидеть больше таких статей.

Как повторно отобразить представление при изменении размера браузера?

Используя классы,

class WindowDimensions extends React.Component {
  constructor(props){
    super(props);
    this.updateWindowDimension = this.updateChart.bind(this);
  }
   
  componentDidMount() {
    window.addEventListener('resize', this.updateWindowDimension)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateWindowDimension)
  }

  updateWindowDimension() {
    this.setState({
       width: window.innerWidth, height: window.innerHeight
    })
  }

  render() {
    return <span>{this.state.width} x {this.state.height}</span>
  }
}

Используя хуки useEffect React,

import React, { useLayoutEffect } from 'react';
import './style.css';
const useWindowDimension = () => {
    const [size, setSize] = useState([0, 0]);
    useLayoutEffect(() => {
    const updateWindowSize = () => {
       setSize([window.innerWidth, window.innerHeight]);
    };
    window.addEventListener('resize', updateWindowSize);
    updateWindowSize();
    return () => window.removeEventListener('resize', updateWindowSize);
  }, []);
  return size;
};
export default function App() {
const [width, height] = updateWindowDimension();
 return (
    <div>
      <h1>Hello React!</h1>
      <p>
        <span>
          Window size: {width} x {height}
        </span>;
      </p>
     </div>
   );
}

URL приложения, https://react-nichgv.stackblitz.io

Продолжайте учиться, продолжайте расти!

Давайте подключимся к LinkedIn !. Подробнее: вопрос о структуре данных javascript.