#Page is not re-rendered when search params are updated

1 messages · Page 1 of 1 (latest)

amber edge
#

i do havet his compoentn

'use client';

import { Button } from '@/components/ui/button';
import LinkButton from '@/components/ui/link-button';
import { Skeleton } from '@/components/ui/skeleton';
import useTagsQuery from '@/lib/hooks/react-query/queries/useTagsQuery';
import { useQueryState } from 'nuqs';

function MarketGroupsTagsLoadingSkeleton() {
return (
<div className='w-full space-x-4'>
{Array.from({ length: 5 }, (_, index) => (
<Button className='w-[180px]' key={index} disabled>
<Skeleton className='w-full h-full' />
</Button>
))}
</div>
);
}

export default function MarketGroupsTags() {
const [selectedFilter, setSelectedFilter] = useQueryState('filter');
const { data: tags, isLoading } = useTagsQuery();

const handleFilterClick = (value: string) => {
setSelectedFilter(selectedFilter !== value ? value : null);
};

if (isLoading) {
return <MarketGroupsTagsLoadingSkeleton />;
}

return (
<div className='w-full space-x-4'>
{tags?.map((tag) => (
<Tag
key={tag.id}
label={tag.label}
value={tag.value}
isSelected={selectedFilter === tag.value}
onClick={() => handleFilterClick(tag.value)}
/>
))}
</div>
);
}

type TagProps = {
label: string;
value: string;
isSelected: boolean;
onClick: () => void;
};

function Tag({ label, value, isSelected, onClick }: TagProps) {
return (
<LinkButton
href={?filter=${isSelected ? '' : value}}
className={${isSelected ? 'bg-green-600 hover:bg-green-700' : ''}}
onClick={(e) => {
e.preventDefault();
onClick();
}}
>
{label}
</LinkButton>
);
}

and this page

molten sluiceBOT
#

Hi @amber edge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the provided code, it seems like you're using the useQueryState hook to manage the state of your selectedFilter. When the selectedFilter changes, it should trigger a re-render of your component. However, if you're experiencing issues with the page not re-rendering when search params are updated, it could be due to a known issue with Next.js.

There are several open issues on the Next.js GitHub repository related to updating search params not triggering re-renders or causing other unexpected behaviors:

One workaround suggested in the comments of the first issue is to convert your page component to a client component using "use client", get searchParams by useSearchParams() instead of the page props, and wrap the server component that fetches data in <Suspense>.

However, please note that this solution might not be ideal for all use cases, as it could potentially waste the benefits of using server components. It's also worth noting that some users reported this solution working in development mode but not in production.

If you're still experiencing this issue, I would recommend following the progress of these GitHub issues for updates or potential fixes.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@amber edge kapa.ai is still learning and improving, please let us know how it did by reacting below