title: Update style of a component onScroll in React.js
body: <p>I have built a component in React which is supposed to update its own style on window scroll to create a parallax effect.</p>
  
  <p>The component <code>render</code> method looks like this:</p>
  
  <pre><code>  function() {
      let style = { transform: 'translateY(0px)' };
  
      window.addEventListener('scroll', (event) =&gt; {
        let scrollTop = event.srcElement.body.scrollTop,
            itemTranslate = Math.min(0, scrollTop/3 - 60);
  
        style.transform = 'translateY(' + itemTranslate + 'px)');
      });
  
      return (
        &lt;div style={style}&gt;&lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>This doesn't work because React doesn't know that the component has changed, and therefore the component is not rerendered.</p>
  
  <p>I've tried storing the value of <code>itemTranslate</code> in the state of the component, and calling <code>setState</code> in the scroll callback. However, this makes scrolling unusable as this is terribly slow.</p>
  
  <p>Any suggestion on how to do this?</p>