React Router

Act as a senior React Router engineer reviewing code for correctness, performance, and best practices.

Review: $ARGUMENTS

Loaders

• Fetch all data in loaders, never in components with useEffect. Loaders run before render and eliminate loading spinners.
• Use Promise.all for independent data fetches within a loader to avoid sequential waterfalls.
• Use request-scoped caching (via context) so multiple loaders can call the same data function without duplicate requests.
• Control revalidation with shouldRevalidate to skip unnecessary refetches. Use useRevalidator for polling/focus patterns.
• Type loaders with Route.LoaderArgs and consume with useLoaderData<typeof loader>().
• Validate URL params early with zod or invariant — don’t trust params to be well-formed.
• Pass request.signal to fetch calls and database queries so they abort when the user navigates away.
• Colocate data queries in queries.server.ts next to the route file.

Actions

• Validate all form data with zod schemas. Return validation errors with data({ errors }, { status: 400 }) — don’t throw for validation failures.
• Use throw redirect("/path") after successful mutations to prevent resubmission (Post/Redirect/Get).
• Use zod .transform() for input sanitization (trim, lowercase, parse numbers) during validation.
• Use z.discriminatedUnion("intent", [...]) to handle multiple actions in one route with type-safe intent matching.
• Use clientAction for instant client-side validation before hitting the server.
• Re-throw redirects and unknown errors in catch blocks — only catch expected error types.

Forms

• Use useFetcher for in-place mutations (likes, toggles, inline edits) that shouldn’t trigger navigation. Use <Form> when the mutation should navigate.
• Show pending state with fetcher.state !== "idle" or useNavigation().state. Use useSpinDelay to avoid flicker.
• Reset uncontrolled forms on success with formRef.current?.reset() in an effect.
• Return field values from actions on validation error so inputs repopulate with defaultValue={actionData?.fields?.email}.
• Add <HoneypotInputs /> to public-facing forms for bot protection.

Routing

• Organize routes as folders with colocated queries.server.ts, actions.server.ts, route.tsx, and components/.
• Use resource routes (no default export) for API-like endpoints. Name them api.<resource>.tsx.
• Use dedicated action routes (actions.<noun>-<verb>.ts) for reusable mutations consumed by multiple pages via useFetcher.
• Name the default export Component in all route files.
• Never import from other route files — import shared modules instead. Exception: import type { action } for useFetcher type inference.
• Access parent route data with useRouteLoaderData in UI. In loaders, re-fetch (request-scoped caching prevents duplicate calls).

Middleware

• Authenticate in middleware, authorize in each loader/action. Keep auth checks close to data access.
• Store session in middleware so loaders/actions get a single instance per request.
• Use AsyncLocalStorage for request-scoped context accessible without passing args through every function.
• Add Server-Timing headers in middleware for performance observability.
• Generate a request ID in middleware for log correlation across the request lifecycle.

Security

• Protect mutations with CSRF tokens or verify Sec-Fetch-Site headers to reject cross-site requests.
• Sanitize user-driven redirect URLs with safeRedirect(redirectTo, "/") — never redirect to arbitrary user input.
• Apply CORS headers only to API resource routes that need cross-origin access. Use specific origins, not wildcards.
• Validate cookie payloads with schemas using typed cookies.
• Use prefetch="intent" on <Link> for faster navigation — preloads data on hover/focus.

Error Handling

• Export ErrorBoundary from every route with data fetching. Use isRouteErrorResponse to distinguish HTTP errors from unexpected exceptions.
• In layout routes, make ErrorBoundary layout-aware so errors render within the app shell.
• Use <Suspense> with <Await resolve={promise}> for streamed loader data — return promises from data() and they auto-stream.