I having performance problems with React, basically I have 2 pact menus that appear when the page scroll to x distance from the top. As I see another ponents of the web application are doing little moves when I scroll, the cause is because they are re-rendering.

To know the distance to the top while a user does a scroll I have a eventlistener on the ponentDidMount() 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:

Here is some code, exactly the top bar where are nested ponents and triggers the pact menu bar to appear when user scolls more than 100px from top:

export default class AppTopBar extends Component {
    constructor (props){
        super(props);
        this._bind("_handleOnScrollDocument");
        this.state = {
            StatusBar: false
        }
    }

    ponentDidMount() {
        if (process.env.BROWSER) {
            document.addEventListener("scroll", (e) => this._handleOnScrollDocument(e), true);
        }
    }

    _handleOnScrollDocument(e) {
        if (e.target.body.scrollTop > 100) {            
            this.setState({ StatusBar: true }); 
        } else {
            this.setState({ StatusBar: false });
        }
    }

    render() {
        return (
            <div className="aui-core-apptopbar">
                <StatusBar panies={this.propspanies} pactMenuItems={this.propspactMenuItems} StatusBar={this.state.showCompactStatusBar}/>
                <StatusBar panies={this.propspanies} userOptions={this.props.userOptions} pactMenuItems={this.propspactMenuItems}/>
                <MainNavBarView menuItems={this.props.menuItems}/>
            </div>
        );
    }
}

I have been investigatin and reading info about the ponents lifecycle and other performance stuff like this: PURERENDERMIXIN

Do you know a better way to do things to get light web applications and avoid re-rendering on scroll?

I having performance problems with React, basically I have 2 pact menus that appear when the page scroll to x distance from the top. As I see another ponents of the web application are doing little moves when I scroll, the cause is because they are re-rendering.

To know the distance to the top while a user does a scroll I have a eventlistener on the ponentDidMount() 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:

Here is some code, exactly the top bar where are nested ponents and triggers the pact menu bar to appear when user scolls more than 100px from top:

export default class AppTopBar extends Component {
    constructor (props){
        super(props);
        this._bind("_handleOnScrollDocument");
        this.state = {
            StatusBar: false
        }
    }

    ponentDidMount() {
        if (process.env.BROWSER) {
            document.addEventListener("scroll", (e) => this._handleOnScrollDocument(e), true);
        }
    }

    _handleOnScrollDocument(e) {
        if (e.target.body.scrollTop > 100) {            
            this.setState({ StatusBar: true }); 
        } else {
            this.setState({ StatusBar: false });
        }
    }

    render() {
        return (
            <div className="aui-core-apptopbar">
                <StatusBar panies={this.props.panies} pactMenuItems={this.props.pactMenuItems} StatusBar={this.state.showCompactStatusBar}/>
                <StatusBar panies={this.props.panies} userOptions={this.props.userOptions} pactMenuItems={this.props.pactMenuItems}/>
                <MainNavBarView menuItems={this.props.menuItems}/>
            </div>
        );
    }
}

I have been investigatin and reading info about the ponents lifecycle and other performance stuff like this: PURERENDERMIXIN

Do you know a better way to do things to get light web applications and avoid re-rendering on scroll?

• javascript
• performance
• reactjs

Share Improve this question Follow edited Nov 16, 2015 at 15:09 Fraccier asked Jun 16, 2015 at 8:53 FraccierFraccier 83033 gold badges1212 silver badges2121 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

Let's say you create a local variable flag for your class. And then:

_handleOnScrollDocument(e) {
  let newFlag = (e.target.body.scrollTop > 100);
  if (flag !== newFlag) {
    this.setState({showCompactStatusBar: newFlag});
    flag = newFlag;
  }
};

This will cause state change (and re-rendering) only when you pass the scrollTop threshold (100) from one direction or other. Otherwise we don't need to set state at all, thus avoiding render to be called.

The "built-in" solution is to use the shouldComponentUpdate method which allows you to pare the current props & state of a ponent with the ining props & state and then short-circuit the render method if you choose:

_handleOnScrollDocument(e) {
    // set the state no matter what
    this.setState({
        showCompactStatusBar: e.target.body.scrollTop > 100
    });
},

shouldComponentUpdate(newProps, newState) {
    // only render if the state has changed
    return this.state.showCompactStatusBar !== newState.showCompactStatusBar;
}

I had a scroll event on a ponent inside my page that had overflow: auto CSS rule. I attached scroll event listener to that ponent as it was guided on this blog post. However, setting last scroll position into state would ruin performances heavily.

So instead I defined last position inside class constructor and changed it there, and avoided re-rendering on each scroll.

constructor(props){
  super(props)
  this.state = { scrollDirection: 'up' }
  this.lastY = 0
}

I would only change state if direction changed.

handleListScroll(event){
  const Y = event.currentTarget.scrollTop
  const lastY = this.lastY
  if (Y > lastY) {
    scrollDirection = 'down'
    if (this.state.scrollDirection === 'up') {
      this.setState({
        scrollDirection,
      })
    }
  }
  if (Y < lastY) {
    scrollDirection = 'up'
    if (this.state.scrollDirection === 'down') {
      this.setState({
        scrollDirection
      })
    }
  }
  this.lastY = Y
}