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.

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.

Show pending state with

fetcher.state !== "idle"

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.

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).

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.

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.

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.