useLoaderData returns null at first on client

[ersinakinci]

I have a page nested within a layout, they look like this:

routes/
  _auth.login._index.tsx // page
  _auth.tsx  // layout

Both have loaders:

// auth.tsx
export const loader = async ({ request }: LoaderFunctionArgs) => {
  return 'bar';
};

export default function Layout() {
  const foo = useLoaderData<typeof loader>();

  return <Outlet />
}


// _auth.login._index.tsx
export const loader = async ({ request }: LoaderFunctionArgs) => {
  return 'abc';
};

export default function Page() {
  // Returns null on first client render
  const xyz = useLoaderData<typeof loader>();

  return ...
}

I'm finding that when I call useLoaderData on the layout route, the first client-side render of my page layout route will return null for useLoaderData. It doesn't matter what's being called or returned from either loader, the consistent thing is that if you call useLoaderData on the parent, the child returns null on the client at first. load a child route, the parent/layout route will return null.

SSR doesn't have this problem, if you stick a console.log in the child it will show the correct value returned from the loader on your server console. I can clearly see the loader data in the layout component's state in window.__remixContext as well as the HTML sent over the wire, so it's being properly serialized.

If I'm running the dev server and update a page, triggering HMR, useLayoutData in the layout component loads the data correctly.

My understanding is that useLoaderData should always return whatever data has been rendered on the server. What gives?

[ersinakinci]

Argh, I was misreading my own logs. It was the parent useLoaderData call that was returning null, not the child.

I think this makes sense...? Because the layout is a separate route...? So its loader doesn't get called...maybe...? I'm confused which loaders get called when. Wouldn't a layout's loader be called whenever its children are loaded, too?

Is it bad practice to put a loader in a layout?

[ersinakinci]

I'm not sure what I did exactly, but the problem seems to have gone away after I did some edits to root.tsx and did a hard refresh/clear cache on my browser.