Remix: React Router v7 and Remix 3 Explained

What is Remix?

Remix is a web framework from the creators of React Router. The name now covers two things: Remix v1 and v2, React frameworks whose ideas (nested routes, loaders, actions) continued as React Router v7 framework mode, and Remix 3, a new framework built on Web APIs that does not depend on React. Check which one a project means before you read any docs.

From Remix v2 to React Router v7

In May 2024 the Remix team announced that what they had planned as Remix v3 would ship as React Router v7. React Router v7 has three modes: declarative (plain routing), data (loaders and actions) and framework, which adds a Vite plugin, type-safe route modules, code splitting and a choice of SPA, SSR or static rendering. The official upgrade path is to enable the future flags, replace the @remix-run/* packages with react-router and change the imports. If your app is on Remix v2, that is the route to stay on React. See React for the library itself and server-side rendering for what framework mode does on the server.

Remix 3

Remix 3 is a ground-up redesign announced in May 2025. Its site describes a runtime-first framework on Web APIs with no application build step, where assets compile when requested and state is plain JavaScript. The announcement says it will have no critical dependencies, not even React, and starts from a fork of Preact. The remix package on npm has been at 3.0.0 since 1 October 2026, but the project is young, so check remix.run before betting a production app on it.

How loaders and actions work

A route module exports a loader that runs on the server to fetch data, and an action that handles form submissions. The component receives the loaded data as a prop, so the page renders with data instead of fetching after load.

// app/routes/product.tsx (React Router framework mode)
import type { Route } from "./+types/product";

export async function loader({ params }: Route.LoaderArgs) {
  const product = await getProduct(params.pid);
  return { product };
}

export default function Product({ loaderData }: Route.ComponentProps) {
  return <h1>{loaderData.product.name}</h1>;
}

Because the loader runs before render, the server can send finished HTML, and the browser then hydrates it. Nested routes load their data in parallel instead of in a waterfall. If you also use Next.js, the idea is similar but the API is different. Framework mode builds with Vite.

Common mistakes

• Mixing the generations. Remix v2 tutorials, React Router v7 framework mode and Remix 3 use different packages and APIs. Match the docs to the version in your package.json.
• Assuming Remix 3 is React. It is not, so React libraries will not drop in.
• Slow loaders. Every request waits for its loaders. A slow database query becomes a slow page.
• Skipping the upgrade flags. Enable the future flags on v2 first, or the move to React Router v7 stops being a simple rename.

Testing and monitoring a Remix or React Router app

Server-rendered routes need checks that a unit test cannot give you. Test the HTML a loader produces with an API test, and guard key flows with regression tests. Before launch, run a load test on the loader-heavy routes with LoadFocus load testing. In production, LoadFocus API monitoring checks endpoints on a schedule, and on paid plans it also runs Playwright browser checks for login or checkout. For the wider picture see synthetic monitoring vs real user monitoring.

FAQ

Is Remix dead?

No, but the name changed meaning. Remix v2 ideas live on in React Router v7 framework mode, and the Remix project now develops Remix 3, a new framework.

Is React Router v7 the same as Remix?

React Router v7 framework mode is the successor to Remix v2. The Remix team said what they planned as Remix v3 would be released as React Router v7.

Does Remix 3 use React?

No. The announcement says it will have no critical dependencies, not even React, and it starts from a fork of Preact.

How do I migrate from Remix v2?

Update to the latest v2 release, enable all future flags, replace the @remix-run/* packages with react-router and change the imports. The React Router team describes this as generally non-breaking.

How do I load test a Remix app?

Test the routes that run slow loaders, with realistic traffic and data, and watch response times and errors as users ramp up.