I'm having a hard time understanding why I'm experiencing this error

[JxavierP]

TLDR Error: Error: Card.tsx:39 computations created outside a createRoot or render will never be disposed.

Context: Im currently porting an old nextjs app to Solid. So i initiated that project used tanstack-router with solid. My data's host on hygraph so im using graphql tanstack-query/solid

import ProductCard from "../product/Card";
import { createEffect, For, Show, Switch, Match } from "solid-js";
import { client } from "../../graphql/client";
import {
	FetchAllSearchableProductsDocument,
	ProductCardFieldsFragmentDoc,
	type FetchAllSearchableProductsQuery,
} from "../../graphql/generated/graphql";
import { useFragment } from "../../graphql/generated";

interface FeaturedSectionProps {
	tag: string;
}

const FeaturedSection = (props: FeaturedSectionProps) => {
	const productQuery = useQuery(() => ({
		queryKey: ["productsByTag", props.tag],
		queryFn: async () => {
			return await client.request<FetchAllSearchableProductsQuery>(
				FetchAllSearchableProductsDocument,
				{ tag: props.tag },
			);
		},
		// staleTime: 5 * 60 * 1000,
	}));

	if (import.meta.env.DEV) {
		createEffect(() => {
			console.log("FeaturedSection Query State:", {
				tag: props.tag,
				data: productQuery.data,
				// isLoading: productQuery.isLoading,
				status: productQuery.status,
				isFetching: productQuery.isFetching,
				error: productQuery.error,
				dataUpdatedAt: productQuery.dataUpdatedAt,
			});
		});
	}

	return (
		<section class="flex w-full flex-col justify-start px-4 md:px-8 lg:px-16">
			<span class="my-3 font-lato text-2xl font-semibold">Featured This Month</span>

			<Switch fallback={<div>Something went wrong.</div>}>
				<Match when={productQuery.isLoading}>
					<ul class="scrollbar-hide flex gap-x-8 overflow-x-auto">
						<For each={Array(4)}>{() => <ProductCard product={null} loading={true} />}</For>
					</ul>
				</Match>

				<Match when={productQuery.isError}>
					<div class="my-4 rounded border border-red-400 bg-red-100 p-4 text-red-700">
						<p>Could not load featured products.</p>
					</div>
				</Match>

				<Match when={productQuery.isSuccess}>
					<Show
						when={productQuery.data?.variants && productQuery.data.variants.length > 0}
						fallback={<p class="my-4 text-gray-500">No featured products found for this month.</p>}
					>
						<ul class="scrollbar-hide flex gap-x-8 overflow-x-auto">
							<For each={productQuery.data?.variants}>
								{(variant) => {
									const product = useFragment(ProductCardFieldsFragmentDoc, variant);
									return <ProductCard product={product} />;
								}}
							</For>
						</ul>
					</Show>
				</Match>
			</Switch>
		</section>
	);
};

export default FeaturedSection;

I'm fetching the Product data in this components and passing it as props to my Product Card component ->

import type { ProductCardFieldsFragment } from "../../graphql/generated/graphql";
import formatter from "../../utils/currency-formatter";
import { PlusIcon } from "../ui/Icons";
import { Link } from "@tanstack/solid-router";

interface ProductCardProps {
	product: ProductCardFieldsFragment | null;
	loading?: boolean;
}

const ProductCard: Component<ProductCardProps> = (props) => {
	// // Use createEffect if you need to track any reactive dependencies
	// createEffect(() => {
	// 	// Any reactive computations should go here
	// });

	if (props.loading || !props.product) {
		return (
			<li
				aria-label="ProductCard_container_loading"
				class="flex w-3xs flex-shrink-0 animate-pulse flex-col"
			>
				<div class="mb-1 h-80 rounded-xl bg-gray-200"></div>
				<div class="mt-2 flex flex-col space-y-2">
					<div class="h-4 w-1/4 rounded bg-gray-200"></div>
					<div class="h-5 w-3/4 rounded bg-gray-200"></div>
					<div class="h-8 w-1/2 rounded bg-gray-200"></div>
				</div>
			</li>
		);
	}

	return (
		<li
			aria-label="ProductCard_container"
			class="group flex h-max w-3xs flex-shrink-0 cursor-pointer flex-col"
		>
			<Link to="/product/$slug" params={{ slug: props.product.slug }} preload="intent">
				<div
					aria-label="ProductCard_image_container"
					class="relative mb-1 flex h-80 w-full items-center justify-center overflow-hidden rounded-xl border-2 border-transparent bg-white shadow-xl transition-transform duration-200 ease-linear group-hover:border-indigo-600 active:scale-95"
				>
					<button class="absolute top-3 right-3 rounded-md border-2 border-gray-300 p-0.5 transition-transform duration-100 ease-in hover:border-transparent hover:bg-indigo-600 active:scale-105">
						<PlusIcon class="h-5 w-5 hover:stroke-white" />
					</button>
					<img
						src={props.product.colors[0].images[0].url}
						alt={props.product.colors[0].images[0].fileName}
						class="block max-h-63 max-w-full"
						loading="lazy"
					/>
				</div>
				<div aria-label="ProductCard_details_container" class="link-underline flex flex-col">
					<span class="font-sans text-sm font-semibold text-indigo-600">
						{props.product.product?.brand?.name}
					</span>
					<p class="truncate font-sans text-base font-semibold text-[#131416]">
						{props.product.name}
					</p>
					<p class="font-bebas text-3xl text-[#131416]">{formatter.format(props.product.price)}</p>
				</div>
			</Link>
		</li>
	);
};

export default ProductCard;

But i keep getting this error whenever i hover over the component
Error: Card.tsx:39 computations created outside a createRoot or render will never be disposed.

I'm guessing its coming from Link component provided by tanstack-query/solid during prefetching?

[JxavierP]

Ah just realized this is simply a warning and not an error. So I'm guessing its fine? If solid can't dispose of the computations does that mean it'll result in a memory leak?

[atk]

There is another issue. Your early return means your component will not update. Use <Show> instead of if-return/return.

[JxavierP]

Thanks yeah i caught onto that later on