Wrapper hook for useMatches to quickly access loader data across components in Remix.run

useLoaderStore.ts

import { useMatches } from 'remix';

// this base hook is used in other hooks to quickly search for specific data across all loaderData using useMatches
// see in action: https://codesandbox.io/s/usematches-loader-data-2h798?file=/app/db.server.ts
export default function useLoaderStore<T>(key: string): T | undefined {
  const matchingRoutes = useMatches();
  const route = matchingRoutes.find((route) => route.data && route.data[key]);
  if (!route || !route.data || route.data[key] === undefined) {
    return undefined;
  }
  return route.data[key] as T;
}

useProject.ts

import type { PopulatedProject } from '~/types';
import useLoaderStore from './useLoaderStore';

// does not use invariant => project can be undefined
export default function useProject() {
  const project = useLoaderStore<PopulatedProject>('project');
  return { project };
}

useProjects.ts

import type { PopulatedProject } from '~/types';
import invariant from 'tiny-invariant';
import useLoaderStore from './useLoaderStore';

// uses invariant => projects is always defined, will throw runtime error otherwise
export default function useProjects() {
  const projects = useLoaderStore<PopulatedProject[]>('projects');
  invariant(projects, 'projects must be defined');
  return { projects };
}