A Way to read a react component size with resize eventhandler

ReactComponentSizing.tsx

class DivSize extends React.Component {

  constructor(props) {
    super(props)

    this.state = {
      width: 0
    }
    this.resizeHandler = this.resizeHandler.bind(this);
  }
  
  resizeHandler() {
    const width = this.divElement.clientWidth;
    this.setState({ width });
  }

  componentDidMount() {
    this.resizeHandler();
    window.addEventListener('resize', this.resizeHandler);
  }
  
  componentWillUnmount(){
    window.removeEventListener('resize', this.resizeHandler);
  }
  
  render() {
    return (
      <div 
        className="test"
        ref={ (divElement) => { this.divElement = divElement } }
      >
        Size: <b>{this.state.width}px</b> but it should be 18px after the render
      </div>
    )
  }
}

ReactDOM.render(<DivSize />, document.querySelector('#container'))

// HTML Tag where it nested:
<div id="container"></div>