Duplicated render after `nevigate`

[PoldarnKJ]

Describe the bug

useNavigate().nevigate will cause multiple render.

The demo is as below (also accessible in the following codesandbox):

const HomePage = () => {
  const navigate = useNavigate<NavigateParams>();
  console.count("HomePage");
  return (
    <div>
      <h1>Home</h1>
      <button
        onClick={() => {
          navigate({
            to: "",
            search: {
              page: "1"
            }
          });
        }}
      >
        set query string
      </button>
    </div>
  );
};

Every time set query string is invoked, HomePage component will be re-rendered 3 times.

Your Example Website or App

https://codesandbox.io/s/lively-sun-z1g9fr?file=/src/index.tsx

Steps to Reproduce the Bug or Issue

1. Open codesandbox above.
2. Open devtools.
3. click set query string button.
4. Inspect console.log invocation in HomePage component.

Expected behavior

I expected the component to be re-rendered once when nevigate be invoked.

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[yibird]

I also found this problem. It's ridiculous to render three times, but I only want to render once. I don't have a good solution. In order to avoid additional rendering components for routing navigation, I use location.href

[tannerlinsley]

Rendering times and amounts will depend on many different factors. In TanStack Router, we only render when something has changed in the router state. If you see a render, it exists to make sure your UI doesn't get out of date with the router state.