react-router-code-review

React Router loaders handle data fetching before route renders, while actions process mutations. Review that loaders return data or redirect on error, actions validate input and use proper error types, defer defers non-critical data to enable streaming, and errorElement catches loader/action failures with isRouteErrorResponse checks.

Form submits to the nearest action, triggering a navigation and full route transition. useFetcher submits without navigation, ideal for non-blocking mutations like optimistic UI updates. Choose Form for page-changing actions; useFetcher for isolated form interactions, pending states, and revalidation without route changes.

Throw errors from loaders and actions; React Router catches them and renders the nearest errorElement. Use isRouteErrorResponse to detect route-specific errors versus unexpected exceptions. Place errorElement at route level to catch its loader and action, or at parent level for nested fallbacks across the entire route tree.

Link is declarative and preferable for user-initiated navigation—it works with prefetch, maintains browser history, and supports pending states via useNavigation. Use imperative navigate only after async operations (form submission success, confirmation dialogs) where declarative routing isn't possible.

Define route parameters in the route definition and access them via loader params argument. Use TypeScript to type params based on your route pattern—param keys match the :paramName segments. Loaders receive typed params, enabling safe access to IDs, slugs, and other dynamic values without runtime checks.

defer delays loading non-critical data until after the route renders. The loader returns a promise wrapped in defer(), and the route suspends the non-critical portion while rendering critical content. This enables streaming responses and faster perceived performance compared to awaiting all data in the loader.