Next.js shared component (header) gets rerendered on new route - reactjs

Question

Im trying to share a header component across all pages for my Next.js app but the header gets rerendered when I try to navigate between routes with Next's Link component. I have created a layout component which is supposed to render the header together with all the possible routes. Basically I don't want the header to get rerendered but visiting a different route using Next.js router it gets rerendered for some reason.
_app.tsx
function MyApp({ Component, pageProps }: AppProps) {
return <QueryClientProvider client={queryClient}>
<AuthProvider>
<LayoutMain>
<Component {...pageProps} />
</LayoutMain>
</AuthProvider>
</QueryClientProvider>
}
LayoutMain.tsx
(This is where I the <Component/> is provided from _app.tsx is supposed to get rendered together with the Header)
function LayoutMain({children}: {children: React.ReactNode}){
const {user} = useContext(AuthContext)
if(!user) return <Login/>
return <>
<Header/>
{children}
</>
}
Header.tsx
function Header() {
console.log('Header rendered')
const {user} = useContext(AuthContext)
return <div className="flex w-full border-b-[1px] border-opacity-25 border-black justify-center bg-white">
<div className="flex justify-between py-2 items-center w-[1000px] my-2 mx-4fvgd">
<Image className="cursor-pointer" objectFit="cover" src="/iglogo.svg" width="100" height="35"/>
<input className="border-[1px] hidden md:block bg-[#fafafa] border-gray-600 border-opacity-30 py-1 px-2 rounded-sm" type="text" placeholder="Search"/>
<div className="flex justify-center gap-5">
<HomeIcon className="cursor-pointer"/>
<SearchIcon className="cursor-pointer"/>
<SendOutlinedIcon className="cursor-pointer -rotate-45 -translate-y-1"/>
<AddCircleOutlineIcon className="cursor-pointer"/>
<FavoriteBorderIcon className="cursor-pointer"/>
<Link href={`/profile/${user?.id}`}>
<div ><Image className="rounded-full cursor-pointer" src="/weeknd.png" objectFit="cover" width="22" height="22"/></div>
</Link>
</div>
</div>
</div>
}

Answer 1

In the React framework, calling the component function is not necessarily rendering the HTML again. If you don't want the header function to get called or the vdom it returns to get diffed on page changes it would make sense to memo the header.
const HeaderMemo = React.memo(Header);
// in the layout
<HeaderMemo user={user} />