Action on window resize in React

Question

I am trying to make a resize action which will return the width of the window and dynamically render it using react.

This is what i got:

class Welcome extends React.Component {
    constructor() {
        super();
        this.state = {
          WindowSize : window.innerWidth
        }
        this.handleResize = this.handleResize.bind(this);
    }
    handleResize(WindowSize, event) {
        this.setState({WindowSize: window.innerWidth})
    }
    render() {
    return <h1  onresize={this.handleResize(this.state.WindowSize)} hidden={(this.state.WindowSize  < 1024) ? "hidden" : ''}>Hello</h1>;
  }
}
ReactDOM.render(
   <Welcome/>,
   document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
  <div id="root">
</div>

This works whenever i reload a page but not when i am changing window size by itself.

Answer 1

When you change the window size - the size of the h1 element will not necessary change, so it isn't guaranteed that your code will run.

What you can do is use the DOM event of resize on the window element to call your function:

class Welcome extends React.Component {
    constructor() {
        super();
        this.state = {
          WindowSize : window.innerWidth
        }
        this.handleResize = this.handleResize.bind(this);
    }
    componentDidMount() {
      window.addEventListener("resize", this.handleResize);
    }
    componentWillUnmount() {
      window.addEventListener("resize", null);
    }
    handleResize(WindowSize, event) {
        this.setState({WindowSize: window.innerWidth})
    }
    render() {
    return <h1 hidden={(this.state.WindowSize  < 1024) ? "hidden" : ''}>Hello</h1>;
  }
}
ReactDOM.render(
   <Welcome/>,
   document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
  <div id="root">
</div>

Answer 2

It is also possible using React Hooks

import React from 'react';


function useWindowDimensions() {
  const [width, setWidth] = React.useState(window.innerWidth);
  const [height, setHeight] = React.useState(window.innerHeight);

  const updateWidthAndHeight = () => {
    setWidth(window.innerWidth);
    setHeight(window.innerHeight);
  };

  React.useEffect(() => {
    window.addEventListener("resize", updateWidthAndHeight);
    return () => window.removeEventListener("resize", updateWidthAndHeight);
  });

  return {
    width,
    height,
  }
}
const App = () => {
  const { width, height } = useWindowDimensions()

  return (
    <div>
      <div className="App">
        <h2>width: {width}</h2>
        <h2>height: {height}</h2>
        <p>Resize the window.</p>
      </div>
    </div>
  );
};

export default App;