T
TanStack•4mo ago
complex-teal

useNavigate to change search params without remounting the route componen

I'm trying to use 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 or just useQuery within the component, it will flash. As a workaround, I've added navigate({..., viewTransition: true}) but I'd really just like to tackle the root cause if possible.
3 Replies
foreign-sapphire
foreign-sapphire•4mo ago
the shown useEffectdoesn't do any mounting - it runs on every render because there is no dependency array since your component is subscribed to search, and you change search, a re-render is expected
complex-teal
complex-tealOP•4mo ago
oh that's embarassing. I've been using React Compiler too much. Yeah there's no actual re-mounting and the paint flashes must be the fault of my own component
foreign-sapphire
foreign-sapphire•4mo ago
the compiler doesn't fill in effect dependencies 😅 but I get where you're coming from

Did you find this page helpful?