unstable_matchRSCServerRequest.routes parameter
The routes parameter is a required array of RSCRouteConfigEntry objects containing the route definitions.
React Router · API · all subjects
hooks
187 notes in this subject, read out of this brain and free to use. This is page 4 of 4.
unstable_matchRSCServerRequest example usage
import { createTemporaryReferenceSet, decodeAction, decodeReply, loadServerAction, renderToReadableStream } from "@vitejs/plugin-rsc/rsc"; import { unstable_matchRSCServerRequest as matchRSCServerRequest } from "react-router"; matchRSCServerRequest({ createTemporaryReferenceSet, decodeAction, decodeFormState, decodeReply, loadServerAction, request, routes: routes(), generateResponse(match) { return new Response( renderToReadableStream(match.payload), { status: match.statusCode, headers: match.headers, } ); }, });
Typesafety challenges with clientLoader and hydration
When both loader and clientLoader are present, the correct generic for useLoaderData depends on multiple factors: clientLoader.hydrate setting and presence of HydrateFallback. With loader only: typeof loader. With only clientLoader and no hydrate: typeof clientLoader | undefined. With both and hydrate false: typeof loader | typeof clientLoader. With both and hydrate true but no HydrateFallback: typeof loader | typeof clientLoader. With both, hydrate true, and HydrateFallback present: typeof clientLoader.
useFetcher independent state management for list items
Each fetcher has autonomy to manage its own state independently, ensuring that actions on individual list items don't affect the others. However, revalidation of page data is a shared concern across all fetchers on the page.
useFetcher provides real-time feedback during actions
useFetcher's state management capabilities enable real-time feedback by toggling between states. For example, a delete button can change from 'Delete' to 'Deleting...' based on fetcher.state, assuring users that their actions are being processed.
useFetcher backwards compatibility
The Remix version of useFetcher needs to have type property added for backwards compatibility.
Remix components requiring adjustments for React Router migration
The following Remix components are largely redundant but require adjustments to retain Remix-specific functionality: Link, useLoaderData, useActionData, useTransition, and useFetcher.