Помогите с кастомным хуком

Всем привет. Я тут пытался сделать хук для динамической пагинации. Вроде, сделал, но пока не так, как хотел, но это ладно. Недавно заметил проблему. Если зайти на один раздел сайта - произойдет первая подгрузка данных для 1 страницы. Потом листаем вниз, происходит подгрузка данных для 2 страницы и т.д. Данные у меня хранятся в редакс сторе, а текущие номера страниц в локальном стейте хука. И, получается, что если зайти на другой раздел, а потом снова перейти на первый, то те данные, которые мы подгружали в первый раз остануться в сторе, а вот номер текущей страницы в хуке сбросится и все начнется с начала с дублированием. Если ли какой-то вариант оставить хранение данных на своих места(данные в сторе, номер страницы в локальном стейте хука), но чтобы страница не сбрасывалась.

// Временный вариант реализации, пока не разберусь с ошибкой основного
const useDynamicPagination = (requestFunction, totalCount, startPage = 1, limit = 10) => {
    const [isFetching, setIsFetching] = useState(true);
    const [currentPage, setCurrentPage] = useState(startPage);
    const [pagesCount, setPagesCount] = useState(0);

    useEffect(() => {
        const fetchData = async () => {
            if (isFetching) {
                await requestFunction(currentPage, limit);
                setCurrentPage(p => p + 1);
                setPagesCount(Math.ceil(totalCount / limit) || 3);
            }
            setIsFetching(false);
        }
        fetchData();

        // Знаю, что зависимости неправильные
    }, [isFetching])

    const scrollHandler = useCallback((e) => {
        const scrollPosition = e.target.documentElement.scrollHeight - (e.target.documentElement.scrollTop + window.innerHeight);
        if (scrollPosition < 100 && currentPage < pagesCount) {
            setIsFetching(true);
        }
    }, [pagesCount])

    useEffect(() => {
        document.addEventListener('scroll', scrollHandler);

        return () => {
            document.removeEventListener('scroll', scrollHandler)
        };
    }, [scrollHandler]);

    return {currentPage, isFetching};
}

Компонент, где я использую хук.

const HomeContainer = ({posts, getPosts, totalCount}) => {
    const {currentPage, isFetching} = useDynamicPagination(getPosts, 100);

    return <Home posts={posts}/>;
}

Ответы (0 шт):