Increase number when inView with useEffect and useState - reactjs

Question

I need to show a number, that starts at 0 and increases to X. This "counting" needs to happen when user's reach the number in view, like this example.
For this, I'm trying to use useEffect, useState and useInView, from react-intersection-observer.
But, in my code, my number is a bit crazy, changing from 1 to 2 only.
I've created a component that I can use many times, this way:
function NumericIndicator(props) {
const [counting, setCounting] = useState(false);
const [number, setNumber] = useState(0);
const [ref, inView] = useInView();
useEffect(() => {
setInterval(() => {
if (number < props.value) {
setNumber(number + 1);
} else {
setNumber(props.value);
}
}, 500);
}, [counting]);
useEffect(() => {
if (inView && !counting) {
setCounting(true);
}
}, [inView]);
return (
<div ref={ref}>
<h1>{number}</h1>
<p>
<small>This needs to increase from 0 to {props.value}</small>
</p>
</div>
);
}
Here's a full StackBlitz with my code
Thank you!

Answer 1

Try
import React from 'react';
import { useEffect, useState } from 'react';
import { useInView } from 'react-intersection-observer';
import './style.css';
export default function App() {
return (
<div>
<div style={{ minHeight: '100vh' }}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
convallis sagittis finibus. Maecenas mauris odio, feugiat vel orci
non, consectetur placerat turpis. Proin tincidunt ut tellus posuere
euismod. Donec id venenatis dui. Quisque ultrices dignissim ipsum ut
tempus. Praesent mollis elit ac magna laoreet tempus at a dui.
Suspendisse sed venenatis arcu, quis commodo sapien. Ut at malesuada
dui. Curabitur feugiat elementum ligula, a pellentesque tortor. Fusce
id nisl ornare, congue dui vitae, ornare ex. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos.
</p>
<p>
Vivamus blandit leo ac magna efficitur vulputate. Praesent vitae magna
elit. Nullam non metus nec mauris maximus tincidunt a ac velit. Aenean
elit metus, aliquet at gravida ornare, commodo gravida nisl. Cras
vestibulum lacinia erat sit amet cursus. Donec pretium enim porttitor
magna tincidunt, a venenatis sem bibendum. Aenean ornare enim et odio
pharetra iaculis. Class aptent taciti sociosqu ad litora torquent.
</p>
</div>
<div style={{ height: '50vh', backgroundColor: '#27ae60' }}>
<NumericIndicator value={10} />
</div>
<div style={{ height: '50vh', backgroundColor: '#e67e22' }}>
<NumericIndicator value={70} />
</div>
<div style={{ height: '50vh', backgroundColor: '#9b59b6' }}>
<NumericIndicator value={90} />
</div>
<div style={{ height: '50vh', backgroundColor: '#2c3e50' }}>
<NumericIndicator value={110} />
</div>
</div>
);
}
function NumericIndicator(props) {
const [number, setNumber] = useState(0);
const [ref, inView] = useInView();
useEffect(() => {
if (!inView) return () => {};
const interval = setInterval(() => {
setNumber((prev) => Math.min(prev + 1, props.value));
}, 500);
return () => clearInterval(interval);
}, [inView, props.value, number]);
return (
<div ref={ref}>
<h1>{number}</h1>
<p>
<small>This needs to increase from 0 to {props.value}</small>
</p>
</div>
);
}