title: React: Can't get correct width of element after render
body: <p>I'm trying to setup a Marquee in React if a piece of text is greater than its container but I can't get the correct width of the container, even after the component has rendered. </p>
  
  <p>I read in another answer <a href="https://stackoverflow.com/questions/26556436/react-after-render-code">React “after render” code?</a> that you have to use requestAnimationFrame which I'm trying and it's still not working.         </p>
  
  <p>If I log the width of the container it shows a width of 147px which is set using min-width in the stylesheet but the correct width should be 320px which is set using a media query when the screens min-width is 600px.</p>
  
  <p>This is a child component, the parent is rendered inside an iFrame if it makes any difference and the iFrame's width is well over 600px.</p>
  
  <p><strong>The JS:</strong></p>
  
  <pre><code>module.exports = React.createClass({
  
    componentDidUpdate: function () {
      // Setup marquee
      this.initMarquee();
    },
  
    render: function () {
      // Setup marquee
      this.initMarquee();
  
      var artistName = this.props.artist.artistName;
      var trackName  = this.props.track.trackName;
  
      return (
        &lt;div className="MV-player-trackData no-select" ref="mvpTrackData"&gt;
          &lt;div className="MV-player-trackData-marquee-wrap" ref="mvpMarqueeWrap"&gt;
            &lt;div className="MV-player-trackData-marquee" ref="mvpMarquee"&gt;
              &lt;a className="MV-player-trackData-link no-select" href={this.props.storeUrl} target="_blank"&gt;
                &lt;span id="mvArtistName"&gt;{artistName}&lt;/span&gt; &amp;ndash; &lt;span id="mvTrackName"&gt;{trackName}&lt;/span&gt;
              &lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    },
  
    initMarquee: function () {
      if ( typeof requestAnimationFrame !== 'undefined' ) {
        //store a this ref, and
        var self = this;
        //wait for a paint to setup marquee
        window.requestAnimationFrame(function() {
          self.marquee();
        });
      }
      else {
        // Suport older browsers
        window.setTimeout(this.marquee, 2000);
      }
    },
  
    marquee: function () {
      var marquee     = React.findDOMNode(this.refs.mvpMarquee);
      var marqueeWrap = React.findDOMNode(this.refs.mvpMarqueeWrap);
  
      // If the marquee is greater than its container then animate it
      if ( marquee.clientWidth &gt; marqueeWrap.clientWidth ) {
        marquee.className += ' is-animated';
      }
      else {
        marquee.className = marquee.className.replace('is-animated', '');
      }
    }
  
  });
  </code></pre>
  
  <p><strong>The CSS:</strong></p>
  
  <pre><code>.MV-player-trackData-marquee-wrap {
    height: 20px;
    line-height: 20px;
    min-width: 147px;
    overflow: hidden;
    position: relative;
    width: 100%;
  
    @media only screen and (min-width : 600px) {
      min-width: 320px;
    }
  }
  </code></pre>
  
  <p>I've tried a number of different solutions including <a href="https://www.npmjs.com/package/laidout" rel="nofollow noreferrer">laidout</a> and <a href="https://github.com/KyleAMathews/react-component-width-mixin" rel="nofollow noreferrer">react-component-width-mixin</a> but neither of them work. I tried react component width mixin because in another part of my app I'm trying to get the value of <code>window.innerWidth</code> but that also returns 0 after rendering, unless I set a timeout for around 2 seconds, unfortunately though sometimes 2 seconds isn't long enough due to data loading and other callbacks so this can brake easily.</p>
  
  <p>Any help is really appreciated. Thanks.</p>
  
  <p><strong>Update:</strong>
  One of the answers correctly pointed out i should be calling <code>this.initMarquee();</code> inside <code>componentDidMount</code> which I was doing, unfortunately I pasted the wrong code from when I was testing to see if it made a difference calling it inside <code>render</code>. The correct code looks like this:</p>
  
  <pre><code>componentDidMount: function () {
    // Setup marquee
    this.initMarquee();
  },
  </code></pre>
  
  <p>Unfortunately this doesn't work either, I still receive the incorrect width for marqueeWrap.</p>
  
  <p><strong>Update: 24/06/2015</strong>
  Just to clarify, this is the <a href="http://jsfiddle.net/jonathansampson/xxuxd/" rel="nofollow noreferrer">marquee effect</a> I'm trying to achieve, only when the text is bigger than its container as it's pointless scrolling it when it is not bigger.</p>
  
  <p>Also here is a link to a <a href="https://github.com/facebook/react/issues/2659" rel="nofollow noreferrer">Github Issue</a> from the React team speaking about why React renders before the browser paints. - So as that is the case, I want to know how do I reliably get the width of the element in question.</p>