T
TanStack•3y ago
sunny-green

Re-renders on Link hover

My component tree looks like this: 
- LayoutRoute
   - LayoutSidebar
      - SidebarNavigation
         - Link
         - Link
         - Link
         - Link
         - Link
   - Outlet
- LayoutRoute
   - LayoutSidebar
      - SidebarNavigation
         - Link
         - Link
         - Link
         - Link
         - Link
   - Outlet
The link component is here: 
<Link
    to={item.route.fullPath}
    activeProps={...}
    inactiveProps={...}
>
<Link
    to={item.route.fullPath}
    activeProps={...}
    inactiveProps={...}
>
And every-time I hover a Link component and the active props change, it re-renders the entire layout.
2 Replies
sunny-green
sunny-greenOP•3y ago
The only props on the Link component are className Is this expected? Actually, even if I remove the activeProps and inactiveProps from the <Link> it still re-renders every hover.
genetic-orange
genetic-orange•3y ago
Prefetching 😉

Did you find this page helpful?