Next.js Discord

Discord Forum

Is it a bug or cache mechanism?

Unanswered
Long-horned bees posted this in #help-forum
Open in Discord
Long-horned beesOP
Curious about this behavior of searchParams.
Is it bug? When the query change to /invoices sometime it occur a re-render with 6 record sometime not?
You can see the code here: https://github.com/lehoangan1503/next-dashboard
see the invoices page.tsx and any related code inside this file.
Really want to get help? I spend more 2 days to searching but got no result

4 Replies

muadpn
okay I think when hit backspace its not clearing out the entire keyword.
"use client";

import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import path from "path";

export default function Search({ placeholder }: { placeholder: string }) {
  const searchParams = useSearchParams();
  const params = new URLSearchParams(searchParams);
  const pathname = usePathname();
  const { replace, refresh } = useRouter();
  const handleSearch = (input: string) => {
    if (input) {
      params.set("query", input);
    } else {
      params.delete("query");
    }
    replace(`${pathname}?${params.toString()}`);
  };

  return (
    <div className="relative flex flex-1 flex-shrink-0">
      <label htmlFor="search" className="sr-only">
        Search
      </label>
      <input
        className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
        placeholder={placeholder}
        onChange={(e) => {
          handleSearch(e.target.value);
        }}
        defaultValue={searchParams.get("query")?.toString()}
      />
      <MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
    </div>
  );
}

investigating on to this will find your solution.
because to my knowledge if you are using searchParams that page wont be cached.
muadpn
I think I am wrong, I had a feeling about i read those on some blog/nextdoc but i couldn't find it, Soo maybe someone will correct it, meanwhile you can check on this because ensure the onChange's last stuff is correctly updating,