How to get root data client side ? useMatches or useRouteLoaderData ???

[theocerutti]

Hey!

I've a question what is the more reliable to get root data between:

useRouteLoaderData

export const useRootLoaderData = () => {
  const rootData = useRouteLoaderData('root');
  return rootData;
};

useMatches

export const useRootLoaderData = () => {
  const [root] = useMatches();
  return root.data as any;
};

[kiliman]

Both should be fine as useRouteLoaderData uses useMatches under the hood.

I'd recommend exporting the first function from the root route, and use <typeof loader> to get type inference.

// root.tsx
export const useRootLoaderData = () => {
  const rootData = useRouteLoaderData<typeof loader>('root');
  return rootData;
};

// routes/some-route.tsx
import { useRootLoaderData } from '~/root';