I am trying to implement "infinite scroll" in my react app in which I fetch all data at once and as user scrolls down the page it displays more and more data. For that I use Intersection Observer in my custom hook with threshold of 1 to detect when user scrolls to end of "section" element so that I then can display more data. The problem is that after initial data is rendered my Intersection observer doesn't fire anymore as if it's disconnected but it's not.
Here is my custom hook:
import {useCallback, useEffect, useState} from "react";
export function useInfinityScrollObserver(ref) {
let [isVisible, setIsVisible] = useState(false);
const handleIntersection = useCallback(([entry]) => {
if (entry.isIntersecting){
setIsVisible(true)
}else if (!entry.isIntersecting){
setIsVisible(false)
}
}, [])
useEffect(() => {
const options = {
threshold: 1
}
// Create the observer, passing in the callback
const observer = new IntersectionObserver(handleIntersection, options);
// If we have a ref value, start observing it
if (ref.current) {
observer.observe(ref.current);
}
// If unmounting, disconnect the observer
return () => {
observer.unobserve(ref.current)
observer.disconnect();
}
}, [handleIntersection]);
return isVisible;
}
And here is component where I fetched data and I wanna display more data when user scrolls to the end of the "section" element:
const CountriesSection = () => {
let [data ,setData] = useState(null)
let [loadedCountries, setLoadedCountries] = useState([])
let [loadedCountriesNum, setLoadedCountriesNum] = useState(0)
const ref = useRef(null);
const isVisible = useInfinityScrollObserver(ref) // set hook to watch "section" ref
// Fetch all data at once
useEffect(() => {
async function fetchData() {
const response = await fetch(`https://disease.sh/v3/covid-19/countries?sort=cases`)
const countries = await response.json()
setData(countries)
}
fetchData()
}, [])
// When initial data is fetched or when number of Countries we wanna display changes fire this useEffect
useEffect(() => {
if (data){
const nextCountriesToShow = data.slice(loadedCountriesNum, loadedCountriesNum + 20)
.map(country => <CountryCard key={country.countryInfo._id}
country={country.country}
flag={country.countryInfo.flag}
continent={country.continent}
infected={country.cases}
recovered={country.recovered}
deaths={country.deaths} />)
setLoadedCountries(previousCountries => {
return [...previousCountries, ...nextCountriesToShow]
})
}
}, [data, loadedCountriesNum])
// When Intersection Observer in custom hook changes its state fire this effect. Which means when user scrolls down to the end of "section" element
useEffect(() => {
if (isVisible){
setLoadedCountriesNum(previousNum => {
return previousNum + 20
})
}
}, [isVisible])
return (
<section ref={ref} className={styles['section-countries']}>
{loadedCountries}
</section>
)
}
export default CountriesSection;
One more thing I noticed is when I change threshold inside of my custom hook from 1 to 0, then additional data is rendered each time when section enters my viewport.