Prevent Server Action from getting called if unrelated Search Param changes
const Page = async ({searchParams}: {
searchParams: {
type: string;
};
}) => {
const type = searchParams?.type || "normal";
const responseData = await fetchData(type);
return (
<>
<section className="container flex flex-col">
<TypeSelect/>
<PokeSearch/>
</section>
<section className="container">
<Suspense key={type} fallback={<Loader/>}>
<PokeGrid responseData={responseData}/>
</Suspense>
</section>
</>
);
}
I want this to be recalled if type has changed but not if search has changed which is also a query param used in PokeGrid
searchParams: {
type: string;
};
}) => {
const type = searchParams?.type || "normal";
const responseData = await fetchData(type);
return (
<>
<section className="container flex flex-col">
<TypeSelect/>
<PokeSearch/>
</section>
<section className="container">
<Suspense key={type} fallback={<Loader/>}>
<PokeGrid responseData={responseData}/>
</Suspense>
</section>
</>
);
}
I want this to be recalled if type has changed but not if search has changed which is also a query param used in PokeGrid
