in what instance would

{loading ? (
  <Skeleton />
) : (
  <div>
    <Header foo={foo} bar={bar} />
    <Foo id={foo.id} />
  </div>
)}

cause <Header /> to reload on navigation but

{loading ? (
  <Skeleton />
) : (
  <div>
    <Header foo={foo} bar={bar} />
  </div>
)}

would not?

i.e. The skeleton for Header will appear everytime I navigate to this page, as long as I render <Foo />. But if I remove foo from the return statement, <Header /> will load once and then never again on subsequent navigations