How to get current route context from another hook?

[davidbielik]

When using unstable_createContext, I am setting context in my loaders:

// react-router.config.ts
declare module "react-router" {
  interface Future {
    unstable_middleware: true; // 👈 Enable middleware types
  }
}

export default {
  ssr: true,
  future: {
    unstable_middleware: true,  // 👈 Enable middleware
  },
} satisfies Config;

// root.tsx
import {
  unstable_createContext,
  type ClientLoaderFunction,
  type LoaderFunctionArgs,
} from 'react-router';


const userContext = unstable_createContext<InitialData['user']>(guestUser);
const featuresContext = unstable_createContext<InitialData['features']>({});

export const loader = async ({
  request,
  context,
  params,
}: LoaderFunctionArgs): Promise<InitialData> => {
  const initialData = await getAsyncData(request, context);
  context.set(userContext, initialData.user);
  context.set(featuresContext, initialData.features);
  return initialData;
};

export const clientLoader: ClientLoaderFunction = async ({
  context,
  serverLoader,
  request,
}) => {
  const initialData = await getAsyncData(request, context);
  context.set(userContext, initialData.user);
  context.set(featuresContext, initialData.features);
  return initialData;
};

Questions

1. How do I access the context from outside loaders?

For example, I have a function useFeatures - what hook can I use to access the featuresContext I created?

export const useFeatures(): InitialData['features'] => {
   const features = ???
   return features;
}

Thanks - I can submit a PR to update the docs based on these answers!

[sergiodxa]

That context is only for loaders and actions, it's different than React context, if you want to access the value outside them like in your UI return the data from a loader and then access it from there.