I think I am not understanding the interaction between client and server components, since the following client component yields an error:

Cannot update a component (Router) while rendering a different component (default). To locate the bad setState() call inside default, follow the stack trace as described in https://react.dev/link/setstate-in-render

The error indicated on the useSearchParams(), but I believe it really just points at the beginning of the component.

My <SearchResults /> is server component which literally just spits out static HTML right now, doing nothing else, just while debugging.

If I remove the server component, no error.

If I remove the call to setQuery(), no error.

For the life of me I cannot see where I am updating the state at the wrong time, during a render. This seems like perfectly legitimate react code to me, and so I believe there is something about the server component interaction.

No amount of AI has been able to help me 🤣

Can any of you humans?

const Page = () => {
  const searchParams = useSearchParams();
  const router = useRouter();
  const [inputValue, setInputValue] = useState('');
  const [query, setQuery] = useState('');

  // Initialize state based on query parameter
  useEffect(() => {
    const initialQuery = searchParams.get('q') || '';
    if (initialQuery !== query) {
      setInputValue(initialQuery);
      setQuery(initialQuery);
    }
  }, [searchParams]);

  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
  };

  const handleSearch = (e: FormEvent<HTMLFormElement>) => {
  };

  return (
    <Centred className="flex flex-col gutterless:pt-12 transition-all">
      <div className="flex flex-col transition-all">
        <Card className="card w-full overflow-hidden gutterless:rad-shadow3 max-gutterless:py-6 gutterless:mb-6 transition-all">
          <CardHeader className="text-[var(--text1)]">
            <CardTitle className="text-search">Search Kadampa teachings</CardTitle>
          </CardHeader>
          <CardContent className="text-[var(--text1)] w-full">
            <SearchForm onSubmit={handleSearch} value={inputValue} onChange={handleOnChange} />
          </CardContent>
        </Card>
        {query && (
          <Suspense fallback={<Busy />}>
            <SearchResults query={query} />
          </Suspense>
        )}
      </div>
    </Centred>
  );
};