title: react getting div clientWidth is returning null in component didUpdate
body: <p>I have a react component with an image inside it. I need the image dimentions (not the window dimentions) for some other codes that I do with the image element. when I simply render the component everything is ok but when I refresh the webpage this.imgEl.clientWidth will be undefined does anyone have a solution for that ?</p>
  <p>to be precise in this code chunk below when I refresh the page dimentions are undefined so size will remain 0 and componentdidupdate will run infinitely</p>
  <p>my component code is like this:</p>
  <pre><code>class myComp extends React.Component {
      constructor(props) {
          super(props);
          this.handleSizeChange = this.handleSizeChange.bind(this);
      }
   state = {
          size: {x: 0, y: 0}
  }
  
   componentDidMount() {
          window.addEventListener(&quot;resize&quot;, this.handleSizeChange)
  //then fetch data and a state change
  }
  
   componentDidUpdate(prevProps, prevState, snapshot) {
          if (this.state.size.x === 0 || this.state.size.y === 0) {
              this.handleSizeChange()
          }
      }
  
   componentWillUnmount() {
          window.removeEventListener('resize', this.handleSizeChange);
      }
  
  handleSizeChange() {
       
          this.setState({size: {x: this.imgEl.clientWidth, y: this.imgEl.clientHeight}});
      }
  
  
  
      render() {
          return (
                  &lt;Box m={1} style={{zIndex: 1,minHeight:&quot;97vh&quot;}}&gt;
                              &lt;img ref={(imgEl) =&gt; {
                                  this.imgEl = imgEl
                              }} src={im} onClick={this.onClick}
                                   style={{maxHeight: &quot;97vh&quot;, maxWidth: &quot;90vw&quot;}}/&gt;
                  &lt;/Box&gt;
  )}
  }
  
  
  
  
  
  </code></pre>