React state change on mouse scroll - reactjs

Question

I have the following code to add to a variable every time the mouse has reached the end of the page :
const [number, setNum] = React.useState(5);
const addUp = () => {
setNum(number + 1);
}
const handleScroll = cb => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) cb();
};
React.useEffect(() => {
window.addEventListener("scroll", handleScroll(addUp));
}, [number]);
return (
<div className="App">
{console.log(number)}
sadly the code does not add to its existing value or with a little change to useEffect dependencies I end up in an infinite loop.
How can I add to my state by scrolling to the end of the page ?
the full code can be found at https://codesandbox.io/s/laughing-tree-pw6co

Answer 1

You can try something like the following. Don't add any dependencies for the useEffect() that creates the window event-listener. Anytime your component re-renders that will create a brand-new event listener on top of the one that already exists. You only want that useEffect() to execute once.
To assist you, you can add a second useState() to keep track of the scroll position. true if they are at the bottom, false otherwise. We'll call this endReached.
Then use a second useEffect() to verify the value of endReached, if true then increase number.
See working sandbox: http://codesandbox.io/s/youthful-hofstadter-h362t
App.js
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const myref = React.useRef(0);
const [number, setNum] = React.useState(5);
const [endReached, setEndReached] = React.useState(false);
const handleScroll = () => {
if (
window.scrollY + window.innerHeight >= document.body.offsetHeight &&
!endReached
) {
setEndReached(true);
} else {
setEndReached(false);
}
};
React.useEffect(() => {
if (endReached) {
setNum(number + 1);
}
}, [endReached]);
React.useEffect(() => {
window.addEventListener("scroll", () => handleScroll());
}, []);
return (
<div className="App">
<h1>number is {number}</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tristique
consequat imperdiet. Nulla vitae dolor in nisl fermentum egestas ut ac
nulla. Quisque aliquam libero sit amet neque ullamcorper molestie.
Phasellus massa ligula, rhoncus non consectetur sit amet, consequat eu
leo. Proin nec gravida sapien. Proin convallis malesuada est, nec
tincidunt massa. Quisque sit amet augue molestie, convallis purus quis,
porttitor quam. Duis iaculis ultrices ipsum a egestas. Duis pulvinar
urna sit amet egestas rutrum. Praesent sed consectetur felis. Nulla
massa libero, iaculis tempor porta ornare, hendrerit eu est. Praesent
tempor consequat nibh, in aliquam quam laoreet ut. Sed laoreet congue
urna id feugiat. Etiam egestas gravida dictum. Vestibulum nec sapien
turpis. In hac habitasse platea dictumst. Vestibulum odio turpis,
tincidunt sit amet ultricies at, interdum quis massa. Ut vestibulum quis
tortor viverra consequat. Phasellus ligula erat, efficitur non justo in,
pretium tempor nibh. Aliquam fringilla fermentum consectetur. Nunc
cursus convallis posuere. Pellentesque ac quam a mauris tempus dapibus
ut at quam. In vel tellus in eros elementum bibendum at mollis metus.
Fusce venenatis aliquet magna, non viverra odio dapibus vitae. Etiam
orci metus, consectetur ut enim at, tristique pellentesque augue. Sed eu
cursus metus. Maecenas imperdiet ultricies hendrerit. Maecenas porta
varius ipsum, a convallis magna pharetra ac. Sed sit amet dolor quis mi
luctus auctor. Mauris finibus, purus in dictum suscipit, nibh lacus
consequat orci, id ornare tellus lectus non urna. Nulla est neque,
sagittis at lacinia id, pulvinar quis sem. In hac habitasse platea
dictumst. Aenean vel porta ante, quis pulvinar velit. Etiam at mollis
sapien. Ut tristique pretium nisi, in tincidunt nisl pulvinar nec. Ut ac
ultricies erat, nec maximus neque. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Integer
vehicula, magna non aliquam sagittis, ex sapien interdum magna, vitae
gravida arcu nisi varius nunc. Nunc molestie ante a imperdiet finibus.
Aenean pellentesque rhoncus tincidunt. Suspendisse potenti. Nullam
dictum nibh vel sem ultrices, at lacinia sem cursus. Etiam dignissim
porta nulla a commodo. Nulla facilisi. Quisque non erat lectus.
Suspendisse a justo mi. Suspendisse ut sem et magna vulputate facilisis.
Morbi rutrum ornare tristique. Nam facilisis et urna ut fringilla. Etiam
pretium augue eu lorem mattis vestibulum. Nulla iaculis lorem ultricies
justo varius, id aliquet arcu fringilla. Nunc vehicula velit id nisi
imperdiet, ut lobortis arcu dignissim. Donec et orci iaculis, aliquet mi
quis, pellentesque elit. Aenean ipsum libero, molestie vitae libero eu,
mattis porta nulla. Duis vitae ornare turpis, eget lobortis enim. Cras
ut sagittis ipsum. Aenean luctus lacinia leo, a luctus augue pharetra
nec. Nulla blandit in est id cursus.
</p>
<button onClick={() => setNum(myref.current.value)}>Change</button>
<br />
<input ref={myref} />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);