remix-v2-data-flow-review

Remix v2 Data Flow Code Review

Targets TypeScript route modules importing from @remix-run/*. See remix-v2-data-flow for canonical patterns.

Scope

• In scope: route modules under app/routes/ exporting loader, action, shouldRevalidate, or headers; components that consume useLoaderData, useActionData, useNavigation, useFetcher, useRevalidator, <Await>.
• Out of scope: form ergonomics (<Form> markup, accessibility, useFetcher UI patterns) → covered by remix-v2-forms-review. Route module conventions, file naming, nested routing, error boundary placement → covered by remix-v2-routing-review.
• Imports expected: @remix-run/node (or @remix-run/cloudflare / @remix-run/deno) for server utilities; @remix-run/react for hooks and components.

Quick Reference

Review Checklist

• Data needed for first render is in loader, not useEffect
• Loaders only read; writes live in action
• request.formData() results are validated (zod/valibot/invariant) before use
• Loader/action return values are projected DTOs — no password hashes, tokens, or internal_* fields
• useLoaderData<typeof loader>() uses the type annotation form (not as Foo)
• 404 / auth short-circuits throw a Response (or json/redirect), never a plain Error or string
• Successful action returns redirect(...) (PRG); validation failures return json({ errors }, { status: 400 })
• Action handles both success and error branches; no silent return null
• params.foo is checked with invariant / zod before use
• Pending UI reads useNavigation() / fetcher.state — no useTransition
• formMethod comparisons use UPPERCASE ("POST", not "post")
• shouldRevalidate returns defaultShouldRevalidate by default; opt-outs are narrow and justified
• defer() is used only when at least one promise streams (no await before passing it)
• Every <Await> is wrapped in <Suspense> and has an errorElement
• useRevalidator().revalidate() is reserved for focus/polling/SSE — not called immediately after a <Form> post or fetcher.submit (Remix already revalidates).