Loading via infinite scroll?

[panthro100]

Posts are passed in via:

export default function Index({ posts }) {

Then set to a localPosts var via:

const [localPosts, setLocalPosts] = useState(posts);

Then, new posts are loaded via infinite scroll

 useEffect(() => {
        if (inView && !isLoading) {
            setIsLoading(true);
            if (posts.next_page_url === null) {
                return;
            }

            router.get(
                posts.next_page_url,
                {},
                {
                    preserveState: true,
                    preserveScroll: true,
                    only: ["posts"],
                    onSuccess: () => {
                        console.log(localPosts);
                        console.log(posts);
                    },
                }
            );
        }
    }, [inView, isLoading, localPosts, posts]);

In onSuccess I just am logging things for now, but there is an issue.

localPosts logs rows 1-20.

posts also logs rows 1-20. This should log rows 21-40. It is like onSuccess is running before the new posts prop has had a chance to filter down.

Any ideas?

[ignacio-dev]

I know this is an old post, but I ran into this issue recently.

The way I solved it is by using useState for next_page_url

You update the state of next_page_url on success.