Question - How to re-render the view when the browser is resized?
Answer -
It is possible to listen to the resize event in componentDidMount() and then update the width and height dimensions. It requires the removal of the event listener in the componentWillUnmount() method.
Using the below-given code, we can render the view when the browser is resized.
class WindowSizeDimensions extends React.Component {
constructor(props){
super(props);
this.updateDimension = this.updateDimension.bind(this);
}
componentWillMount() {
this.updateDimension()
}
componentDidMount() {
window.addEventListener('resize', this.updateDimension)
}
componentWillUnmount() {
window.removeEventListener('resize', this.updateDimension)
}
updateDimension() {
this.setState({width: window.innerWidth, height: window.innerHeight})
}
render() {
return {this.state.width} x {this.state.height}
}
}