Svelte API loads multiple times and keeps old data

Initial note: this is an ssr = false project and I cannot/do not use server data, all API calls are made with axios inside pages/components. I removed as much code as I could to keep only what matters.

I have a <Feed /> component:

<script>
	import Post from '$lib/components/post/Post.svelte';
	import InfiniteScroll from '$lib/components/structure/InfiniteScroll.svelte';
	import { createEventDispatcher } from 'svelte';
	import { api } from '$lib/utils/api';

	import { onMount} from 'svelte';

	export let args = {};

	let currentPage = 1;
	let data = [];
	let newBatch = [];

	const dispatch = createEventDispatcher();

	async function fetchData() {
		await api.post.index(currentPage, args)
			.then((response) => {
				newBatch = response.data.data;
			})
	}

	onMount(() => {
		fetchData();
	});

	$: data = [...data, ...newBatch];
</script>

	{#each data as post}
		<Post {post} />
	{/each}

	<!-- No more items -->
	{#if newBatch.length}
		<InfiniteScroll
			hasMore={newBatch.length}
			threshold={100}
			on:loadMore={() => {
				currentPage++;
				fetchData();
			}}
		/>
	{:else}
		<p class="mt-5 text-gray-400 text-center">No more posts.</p>
	{/if}

This is the skeleton for <InfiniteScroll />:

<script>
	import { Preloader } from 'konsta/svelte';
	import { onDestroy, createEventDispatcher } from 'svelte';

	export let threshold = 0;
	export let horizontal = false;
	// export let elementScroll;
	let elementScroll;
	export let hasMore = true;

	const dispatch = createEventDispatcher();
	let isLoadMore = false;
	let component;

	$: {
		if (component || elementScroll) {
			const element = elementScroll ? elementScroll : component.parentNode;

			element.addEventListener('scroll', onScroll);
			element.addEventListener('resize', onScroll);
		}
	}

	const onScroll = (e) => {
		const element = e.target;

		const offset = horizontal
			? e.target.scrollWidth - e.target.clientWidth - e.target.scrollLeft
			: e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop;

		if (offset <= threshold) {
			if (!isLoadMore && hasMore) {
				dispatch('loadMore');
			}
			isLoadMore = true;
		} else {
			isLoadMore = false;
		}
	};

	onDestroy(() => {
		if (component || elementScroll) {
			const element = elementScroll ? elementScroll : component.parentNode;

			element.removeEventListener('scroll', null);
			element.removeEventListener('resize', null);
		}
	});
</script>

<div class="text-center mx-auto">
	<Preloader class="mt-4" colors={{ iconIos: 'text-primary' }} size="w-8 h-8" />
</div>
<div bind:this={component} style="width:0px" />

Then I have a user/[slug]/+page.svelte page where I load the profile data and the profile posts based on the user slug.

<script>
	import ProfileImage from '$lib/components/ProfileImage.svelte';
	import { page } from '$app/stores';
	import Feed from '$lib/components/post/Feed.svelte';
	import { api } from '$lib/utils/api';

	export let userSlug = null;
	export let ownProfile = null;
	let loading = true;
	let user = { data: { user: {}, friends: [], friendship: null } };
	let friendship = null;

	$: {
		fetchData($page.params.slug);
	}

	async function fetchData(slug) {
		loading = true;
		userSlug = ownProfile ? null : slug;
		user = await api.user.show(userSlug).finally(() => {
			loading = false;
		});
		friendship = user.data.friendship;
	}
</script>

<div class="w-1/3 mx-auto">
	<ProfileImage user={user.data.user} size="w-full" link={false} />
</div>

<h1 class="text-center font-bold text-xl">
	{user.data.user.full_name || '-'}
</h1>

{#key userSlug}
	<Feed
		args={{ user_slug: userSlug }}
	/>
{/key}

From within this page I can visit different profiles, and this caused the data not to reload (ie: changed from user/profile-a to user/profile-b, the data was still from profile a) so I used $: { fetchData($page.params.slug) } which hopefully is the right strategy.
But is probably what is now causing this issue:

When I scroll to the bottom, the <InfiniteScroll/> inside <Feed/> loads more posts, but as you can see from this video: https://imgur.com/a/tpVTMDd, when I visit Profile A, then Profile B, then Profile C and I scroll down to the bottom, the <InfiniteScroll/> fires and calls the API of all profiles I visited and keeps in memory all the data running multiple API calls instead of the current profile only.

I think I have to do "destroy" of the element probably but I don't know how.

You have to pass the event handler to removeEventListener, currently you are passing null.

Also, you add listeners in a reactive block, I would highly recommend not doing that, as you might unexpectedly add more than one listener. If there is some conditional logic for determining the element to watch, do that once so you can be sure that listeners are only ever added to and removed from said element.

Might be worth creating a small Sveltekit repo on GitHub that actually reproduces the issues - but here's some potential problems and solutions:

Raise isLoadMore to the <Feed/> component

(same as you have in the +page.svelte)

This fixes a potential issues where loadMore events have fired onScroll but handled at unexpected times because of the JS event loop.

let isLoadMore = false;

async function fetchData() {
  if (isLoadMore) return;

  isLoadMore = true;
  await api.post.index(currentPage, args)
    .then((response) => {
      newBatch = response.data.data
    })
    .finally(() => (isLoadMore = false));

}

Bind event listeners svelte:window in <InfiniteScroll />

I'm not sure about your current code - passing null as the argument to removeEventListener. My understanding was you had to pass in the function as the second argument.

Regardless, if you use the svelte:window special element, you can entirely remove the addEventListener and removeEventListener calls in <InfiniteScroll />. This makes sure that your event listeners are bound correctly, removes the need for the big reactive block in the middle, and is just more "sveltey".

<svelte:window bind:scrollY={onScroll} bind:resize={onScroll}/>

Check out the Svelte {#await} block

Instead of $: { fetchData($page.params.slug) }, you might prefer to do something like the code below. It might save you from initializing components with null-ish/invalid user state. Not specifically related to your post - just noticed you weren't using the feature.

{#await fetchData($page.params.slug)}
  <Preloader/>
{:then user}
  <h1 class="text-center font-bold text-xl">
    {user.data.user.full_name || '-'}
  </h1>
  {#key user.data.slug}
    <Feed args={{user_slug: user.data.slug}}/>
  {/key}
{/await}