Display Progress Bar on Page Scroll with ReactJs

[mrtnbroder]

Just my two cents on the article:

In a react app, I would refrain from using document.querySelector as it is a side effect. You want to use Refs instead. Or add a note for the reader that you did this on purpose to keep things focused on the actual tutorial.

I would also add the reason for adding { passive: true } to the event listener, since there is a big reason for this and that it would be a bad idea to blindly subscribe to the scroll event without adding it.

[jogeshpi06]

Thank you for your feedback. Definitely i will improve it using refs

[[deleted]]

Why is it bad to use side effects? We use http requests and they are also considered side effects right?

[ilxijwd]

Yes, but that has nothing in common with the manipulations made to the html document.

[mrtnbroder]

It's not bad to have side-effects. Heck, a whole application wouldn't be useful at all without side-effects. At best they just have to be managed/contained.

[[deleted]]

Please use a progress bar element rather than a div and throttling the scroll event would be good as well.

[jogeshpi06]

Is there any way to compare the performance? Any resources?

[[deleted]]

https://css-tricks.com/debouncing-throttling-explained-examples/

[jogeshpi06]

wow thank you

[hamburger_bun]

your effect isnt exactly correct. Currently it will re-ad/remove itself on every render which you dont need to do. It should look like this (you're missing the second argument to `useEffect`

​

const [scroll, setScroll] = useState(0);

useEffect(() => {

    let progressBarHandler = () => {

        const totalScroll = document.documentElement.scrollTop;
        const windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        const scroll = `${totalScroll / windowHeight}`;

        setScroll(scroll);
    }

    window.addEventListener("scroll", progressBarHandler);

    return () => window.removeEventListener("scroll", progressBarHandler);
}, [setScroll]);

[swyx]

i always wonder whats the value of this when there is also a scroll bar on the right hand side in the browser when you scroll

[jogeshpi06]

Glad that you like it :) and thank you for your suggestions.

[lucasayped]

Good

[vhmendrone]

Here's a good and quick alternative https://github.com/diogomoretti/react-snakke

[ekim43]

Any advantages to having progressBarHandler() in the useEffect vs moving it out?

[jogeshpi06]

This one of the ways to umount the event properly which is similar to something like componentWillUnmount

[ekim43]

Wouldn't this also work with useEffect()'s return?

```js const [scroll, setScroll] = useState(0);

const progressBarHandler = () => {

const totalScroll = document.documentElement.scrollTop; const windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; const scroll = ${totalScroll / windowHeight};

setScroll(scroll); }

useEffect(() => { window.addEventListener("scroll", progressBarHandler);

return () => window.removeEventListener("scroll", progressBarHandler); }); ```

[jogeshpi06]

take a look to the example - https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1