Why does Link component cause parent to rerender 4 times on mount?"

[spaansba]

I have the following setup:

My parent component:

export function Welcome() {
  console.log("test")
  return (
    <>
      <ForesightLink to={"/test1"}>contact</ForesightLink>
    </>
  )
}

My empty ForesightLink component:

interface ForesightLinkProps
  extends Omit<LinkProps, "prefetch"> {
  children: React.ReactNode
  className?: string
}

export function ForesightLink({ children, className, ...props }: ForesightLinkProps) {
  return (
    <Link {...props} prefetch={"none"} className={className}>
      {children}
    </Link>
  )
}

This results in "Test" being logged 4 times to the console, is this the expected behaviour or is this a bug?
Version: 7.6.3

[sergiodxa]

I tried this to replicate it here https://stackblitz.com/edit/github-virwfsze?file=app%2Froutes%2Fhome.tsx

It does the log twice with StrictMode, and only once without StrictMode.

Aside of that, when you click the link it does render twice, this is the router internal navigation.state changes from idle to loading and then back to idle. With StrictMode it would render 4 times (2 per state changes) while without StrictMode it would render 2 times.

This is totally expected.

[spaansba]

Thanks for the StackBlitz example, it did work correctly there for me as well. However, in my local project (which is nearly identical), the log still appears 4 times even without clicking the link.

I recreated my project on StackBlitz and only see 2 logs there. Very strange. I've also created a repo with the exact code I’m running. Maybe thats easier to test.

[vnekohda]

I see the same issue. I tried 7.5.3 and 7.7.0 - same result.