React JS scroll optimization

Question

I use onscroll event in my React component like this:

import React, { Component } from 'react';
import throttle from 'lodash/throttle';

class Example extends Component {
    state = {
        navigationFixed: false,
    }

    componentDidMount() {
        window.addEventListener('scroll', this.throttledHandleScroll);
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.throttledHandleScroll);
    }

    handleScroll = () => {
        this.contentRef && this.setState({
           navigationFixed: window.scrollY >= this.contentRef.offsetTop - 32,
    });

    throttledHandleScroll = throttle(this.handleScroll, 80); // Using lodash throttle here

    render() {
       //Some variables and components here
       ...
       <section
            className={cx(s.content, {
                [s.navigationFixed]: this.state.navigationFixed,
            })}
            id="content"
            ref={(ref) => {this.contentRef = ref}}
            >
            ...
            //Another components here
       </section>
    }
};

And this is works fine, but it get freeze sometimes, I guess it is because of handleScroll function, which fires too often. So my question is how can I optimise this code?

I think no need to add 'addEventListener' in life cycle method. You can directly bind the div like onScroll={this.handleScroll} — kag
– kag, Commented Apr 4, 2018 at 12:18

Kyle Richardson · Accepted Answer · 2018-04-04 15:51:03Z

2

Try this modification to the handleScroll method.

handleScroll = () => {
    if(!this.contentRef) return;

    const navShouldBeFixed = window.scrollY >= this.contentRef.offsetTop - 32

    if(this.state.navigationFixed && !navShouldBeFixed) {
        this.setState({navigationFixed: false});
    } else if (!this.state.navigationFixed && navShouldBeFixed) {
        this.setState({navShouldBeFixed: true})
    }
}

EDIT: Less lines of code.

handleScroll = () => {
    if(!this.contentRef) return;

    const navShouldBeFixed = window.scrollY >= this.contentRef.offsetTop - 32

    if(this.state.navigationFixed && !navShouldBeFixed || 
       !this.state.navigationFixed && navShouldBeFixed) {
        this.setState({navigationFixed: navShouldBeFixed});
    }
}

This way the setState method is only fired when the UI requires a change.

edited Apr 4, 2018 at 15:51

answered Apr 4, 2018 at 12:16

Kyle Richardson

5,6553 gold badges20 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mad Max Over a year ago

Yeah! That is much better! Thanks a lot!

MANISH MOHAN · Accepted Answer · 2022-08-18 15:47:48Z

0

We can reduce some more checks

handleScroll = () => {
if(!this.contentRef) return;

const navShouldBeFixed = window.scrollY >= this.contentRef.offsetTop - 32

if(this.state.navigationFixed !== navShouldBeFixed) {
    this.setState({navigationFixed: navShouldBeFixed});
}

}

answered Aug 18, 2022 at 15:47

MANISH MOHAN

1091 silver badge9 bronze badges

Collectives™ on Stack Overflow

React JS scroll optimization

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related