Hi guys.
I have a page:

export default async function Page() {
  console.log(`Start rendering Page: ${new Date().toTimeString()}`);
  const affixes = await fetchAffixesList();

  return (
    <div className="flex w-full flex-col space-y-2">
      <div className="self-end">
        <Search placeholder="Search affixes..." />
      </div>
      <AffixesList data={affixes} />
    </div>
  );
}

<Search is almost the same as in the [next.js code lab](https://nextjs.org/learn/dashboard-app/adding-search-and-pagination#adding-the-search-functionality). Basically updates query parameter in the url.

Inside <AffixesList I have following:

'use client';

...imports

export default function AffixesList({ data }: { data: Affix[] }) {
  const [affixes, setAffixes] = useState<Affix[]>(data);
  const searchParams = useSearchParams();

  useEffect(() => {
    const query = searchParams?.get('query')?.toString()?.toLowerCase();
    filter(data, query, setAffixes);
  }, [data, searchParams]);

  return (<div...

Due to nature of a backend and amount of data filtering done on a client side. So whenever I filter data by typing anything a a search input it should change only <AffixesList /> and do not update <Page and re-request data from server.

In reality I have very inconsistent behavior when sometimes Page starts re-rendering and thus requesting data from server and sometimes not.

How to prevent parent Page re-renders when changes in child happens?