Query State issues
Error: "Maximum update depth exceeded" when clicking the Select dropdown in TanStack Router. Works fine in React Router using nuqs. How to properly update search params without infinite re-renders?
// Route component
const searchSchema = z.object({
joined: z.optional(z.boolean()),
past: z.optional(z.enum(["all", "only", "exclude"])),
});
export const Route = createFileRoute({
validateSearch: (search) => searchSchema.parse(search),
component: RouteComponent,
});
function RouteComponent() {
const navigate = Route.useNavigate();
const search = Route.useSearch();
const updateFilters = useCallback(
(updates: { joined?: boolean; past?: string }) => {
navigate({
to: ".",
search: { ...search, ...updates },
});
},
[navigate, search],
);
return <MyTable updateFilters={updateFilters} />;
}
// Component that triggers the error
function MyTable({ updateFilters }) {
return (
<Select
value={search.joined ? "joined" : "all"}
onValueChange={(value) =>
updateFilters({ joined: value === "joined" })
}
>
{/* options */}
</Select>
...
);
}// Route component
const searchSchema = z.object({
joined: z.optional(z.boolean()),
past: z.optional(z.enum(["all", "only", "exclude"])),
});
export const Route = createFileRoute({
validateSearch: (search) => searchSchema.parse(search),
component: RouteComponent,
});
function RouteComponent() {
const navigate = Route.useNavigate();
const search = Route.useSearch();
const updateFilters = useCallback(
(updates: { joined?: boolean; past?: string }) => {
navigate({
to: ".",
search: { ...search, ...updates },
});
},
[navigate, search],
);
return <MyTable updateFilters={updateFilters} />;
}
// Component that triggers the error
function MyTable({ updateFilters }) {
return (
<Select
value={search.joined ? "joined" : "all"}
onValueChange={(value) =>
updateFilters({ joined: value === "joined" })
}
>
{/* options */}
</Select>
...
);
}
