useNavigate to change search params without remounting the route componen

I'm trying to use

useNavigate()

useNavigate()

to change just the search params, but it unnecessarily flashes due to unmounting and mounting the route component again. Is there a mode of operation where it "just" updates the URl with history push but doesn't re-mount the Route component?

My code:

export const Route = createFileRoute("/route/")({
  validateSearch: (search) => {
    return searchSchema.parse(search);
  },
  beforeLoad: ({ search }) => {
    return {
      // ...
    };
  },
  component: RouteComponent,
});

function RouteComponent() {
  const search = useRouteContext({from: "/route/", select: ({search}) => search});
  const navigate = useNavigate({from: "/route"});
  const id = search.id;
  const setId = (name: string) => {
    navigate({search: {id: name}})
  };
  useEffect(() => {
    console.warn("mounted");
    return () => console.warn("unmounted");
  });

export const Route = createFileRoute("/route/")({
  validateSearch: (search) => {
    return searchSchema.parse(search);
  },
  beforeLoad: ({ search }) => {
    return {
      // ...
    };
  },
  component: RouteComponent,
});

function RouteComponent() {
  const search = useRouteContext({from: "/route/", select: ({search}) => search});
  const navigate = useNavigate({from: "/route"});
  const id = search.id;
  const setId = (name: string) => {
    navigate({search: {id: name}})
  };
  useEffect(() => {
    console.warn("mounted");
    return () => console.warn("unmounted");
  });

and when I call setId, it remounts. Due to the vdom, if this remount does not hit any loading state, the navigation is pretty seamless, but if there's anything in

loader

loader

or just

useQuery

useQuery

within the component, it will flash.

As a workaround, I've added

navigate({..., viewTransition: true})

navigate({..., viewTransition: true})

but I'd really just like to tackle the root cause if possible.

TanStack•11mo ago•

5 replies

dead-brown

useNavigate to change search params without remounting the route componen

I'm trying to use

useNavigate()

useNavigate()

export const Route = createFileRoute("/route/")({
  validateSearch: (search) => {
    return searchSchema.parse(search);
  },
  beforeLoad: ({ search }) => {
    return {
      // ...
    };
  },
  component: RouteComponent,
});

function RouteComponent() {
  const search = useRouteContext({from: "/route/", select: ({search}) => search});
  const navigate = useNavigate({from: "/route"});
  const id = search.id;
  const setId = (name: string) => {
    navigate({search: {id: name}})
  };
  useEffect(() => {
    console.warn("mounted");
    return () => console.warn("unmounted");
  });

export const Route = createFileRoute("/route/")({
  validateSearch: (search) => {
    return searchSchema.parse(search);
  },
  beforeLoad: ({ search }) => {
    return {
      // ...
    };
  },
  component: RouteComponent,
});

function RouteComponent() {
  const search = useRouteContext({from: "/route/", select: ({search}) => search});
  const navigate = useNavigate({from: "/route"});
  const id = search.id;
  const setId = (name: string) => {
    navigate({search: {id: name}})
  };
  useEffect(() => {
    console.warn("mounted");
    return () => console.warn("unmounted");
  });

and when I call setId, it remounts. Due to the vdom, if this remount does not hit any loading state, the navigation is pretty seamless, but if there's anything in

loader

loader

or just

useQuery

useQuery

within the component, it will flash.

As a workaround, I've added

navigate({..., viewTransition: true})

navigate({..., viewTransition: true})

but I'd really just like to tackle the root cause if possible.

useNavigate to change search params without remounting the route componen

Similar Threads

useNavigate to change search params without remounting the route componen

Similar Threads

Similar Threads

Similar Threads