title: Avoid re-rendering on scroll and increase performance in a React web application
body: <p>I having performance problems with React, basically I have 2 compact menus that appear when the page scroll to x distance from the top. As I see another components of the web application are doing little moves when I scroll, the cause is because they are re-rendering.</p>
  
  <p>To know the distance to the top while a user does a scroll I have a eventlistener on the componentDidMount() and I think that this is causing the problem but I'm not sure, as you know react stable version is pretty new and I'm also new with this technology:</p>
  
  <p>Here is some code, exactly the top bar where are nested components and triggers the compact menu bar to appear when user scolls more than 100px from top:</p>
  
  <pre><code>export default class AppTopBar extends Component {
      constructor (props){
          super(props);
          this._bind("_handleOnScrollDocument");
          this.state = {
              StatusBar: false
          }
      }
  
      componentDidMount() {
          if (process.env.BROWSER) {
              document.addEventListener("scroll", (e) =&gt; this._handleOnScrollDocument(e), true);
          }
      }
  
      _handleOnScrollDocument(e) {
          if (e.target.body.scrollTop &gt; 100) {            
              this.setState({ StatusBar: true }); 
          } else {
              this.setState({ StatusBar: false });
          }
      }
  
      render() {
          return (
              &lt;div className="aui-core-apptopbar"&gt;
                  &lt;StatusBar companies={this.props.companies} compactMenuItems={this.props.compactMenuItems} StatusBar={this.state.showCompactStatusBar}/&gt;
                  &lt;StatusBar companies={this.props.companies} userOptions={this.props.userOptions} compactMenuItems={this.props.compactMenuItems}/&gt;
                  &lt;MainNavBarView menuItems={this.props.menuItems}/&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>I have been investigatin and reading info about the components lifecycle and other performance stuff like this: <a href="http://aeflash.com/2015-02/react-tips-and-best-practices.html" rel="nofollow">PURERENDERMIXIN</a></p>
  
  <p>Do you know a better way to do things to get light web applications and avoid re-rendering on scroll?</p>