context & loaders

15 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

LoaderArgs type structure

LoaderArgs is a generated type that includes params derived from the route path. For a route like "products/:id", LoaderArgs includes { params: { id: string } }. The loader function receives an object with shape Route.LoaderArgs.

Accessing URL params in loaders

Dynamic URL parameters are passed to loader functions via the params object in the loader argument. The property name on params matches the filename segment. Example: export async function loader({ params }) { return fakeDb.getAllConcertsForCity(params.city); }

Route object loader property

The loader property is an async function that provides data to route components before they are rendered. The loader receives an object with a params property containing route parameters. The data returned from the loader is accessible in the component via the useLoaderData hook.

Route object shouldRevalidate property

The shouldRevalidate property is a function that controls when loader data is revalidated. By default, a route loader is revalidated when its own route params change, any URL search params change, or after an action returns a non-error status code. Defining this function opts out of the default behavior completely, allowing manual control of revalidation for navigations and form submissions. The function receives ShouldRevalidateFunctionArgs and should return a boolean.

Loader example usage

Example loader and component: async function loader({ params }) { return { message: "Hello, world!" }; } function MyRoute() { let data = useLoaderData(); return <h1>{data.message}</h1>; }

Route module with clientLoader function

A route module can export an async clientLoader function that runs on the client before rendering the component. This function can fetch data and return it as loaderData, which is passed to the exported default Component.

MDX route loader export

In an MDX route file, you can export a loader function that returns data to be used in the route. The loader function is called server-side and its return value is passed to the route. Example: export const loader = () => ({ message: "Loader data" });

ShouldRevalidateFunctionArgs parameter

shouldRevalidate function receives ShouldRevalidateFunctionArgs parameter. Returns a boolean indicating whether to revalidate the route loader.

loader export function

Route loaders provide data to route components before they are rendered. They are only called on the server when server rendering or during the build with pre-rendering. Loaders return data that is passed to the component via loaderData prop.

clientLoader export function

clientLoader is called only in the browser and provides data to route components in addition to, or in place of, route loaders. It receives a serverLoader argument. Setting clientLoader.hydrate = true allows the client loader to participate in initial page load hydration of server rendered pages.

shouldRevalidate export function

In framework mode with SSR, route loaders are automatically revalidated after all navigations and form submissions. Defining shouldRevalidate allows you to opt out of revalidation for a route loader. It receives ShouldRevalidateFunctionArgs and returns a boolean.

clientLoader example with hydrate property

Example showing clientLoader that can call serverLoader and fetch additional client-side data. Setting clientLoader.hydrate = true (using as const for TypeScript typing) allows participation in initial page load hydration.

RSC Framework Mode loaders and actions can return React elements

In RSC Framework Mode, loaders and actions can return React elements along with other data. These elements will only ever be rendered on the server. If using client-only features like Hooks or event handlers within returned elements, those components must be extracted into a client module marked with "use client" directive.

RemixContext.Provider replaces RemixEntry context

The removal of RemixEntry and its context is replaced by a new RemixContext.Provider wrapping DataStaticRouter or DataBrowserRouter. The new context only needs remix-specific aspects: manifest and routeModules. Everything else from the old RemixEntryContext is now in the router contexts and staticHandlerContext during SSR.

RemixContext replaces EntryContext

The new RemixContext replaces the old EntryContext and contains the following properties: manifest, routeModules, staticHandlerContext, and serverHandoffString. This context is sent through entry.server.ts and is considered an opaque API, so changes to its shape are not considered breaking changes.

Give your agent this brain