These Remix interview questions are for hiring managers and frontend leads building a technical round for senior Remix developers, and for developers checking their knowledge before an interview. Remix's framework features now live in React Router v7, so the questions accept answers in Remix v2 or React Router v7 terms. Each question explains what a strong answer covers, with red flags where candidates often slip. Pick 6 to 8 that match your stack. For hooks, rendering and Server Components, use our React interview questions as well.
What a strong Remix interview checks
- Server and client split: what runs on the server, what runs in the browser, and why.
- Data loading: loaders, actions and revalidation used instead of hand-written fetching.
- Routing: nested routes, layouts and the file naming rules.
- Current versions: the Remix v2 to React Router v7 merge and what changed.
- Resilience: streaming, error boundaries and forms that work without JavaScript.
- Production: deployment adapters, caching and sessions.
Remix interview questions: loaders and actions
1. What is a loader, and where does it run?
What good looks like: a loader is a function exported from a route file. It runs on the server before the route renders, on the first page load and again on client-side navigations, where Remix calls it with a fetch request. The component reads the result with useLoaderData(), or with the typed loaderData prop in React Router v7. Because it only runs on the server, it can query the database and use secrets safely.
Red flag: "Loaders only run on the first page load."
2. What is an action, and what happens after it finishes?
What good looks like: an action handles non-GET requests to a route, such as a form post. It reads await request.formData(), validates the input, writes the change and returns data or a redirect. Afterward, Remix revalidates: it calls the loaders on the page again so the UI shows fresh data with no manual cache updates. A strong candidate mentions the shouldRevalidate export for skipping expensive loaders.
3. Nested routes each have a loader. Do they run one after another?
What good looks like: no, they run in parallel. Remix knows every route that matches the URL before it starts, so it calls all of their loaders at once. That avoids request waterfalls. The trade-off is that a child loader cannot read its parent's data, so shared work such as loading the current user is repeated or cached per request.
4. A parent layout checks that the user is an admin. Are the child routes protected?
What good looks like: not by that check alone. Loaders run in parallel and each can be called directly over HTTP, so a child loader or action runs whether or not the parent check passed. Every loader and action that touches protected data must check auth itself, usually with a shared helper.
Red flag: "The layout redirects, so the children are safe." This is one of the most common security bugs in Remix apps.
5. How should a loader handle a record that doesn't exist?
What good looks like: throw a 404 response, for example throw data("Not found", { status: 404 }) in React Router v7 or a thrown json() response in Remix v2. The nearest error boundary then renders a not-found message with the right status code, instead of a page full of empty values.
6. When would you use clientLoader or clientAction?
What good looks like: when work should happen in the browser. Examples are caching server data on the client, reading browser storage, calling a third-party API directly, or running part of the app as a single-page app. A clientLoader can call serverLoader() and add to its result. A good candidate treats these as tools with a clear reason, not a default.
Nested routes and routing
7. Explain nested routing and what Outlet does.
What good looks like: URL segments map to route files, and a parent route renders its child where it places Outlet. A URL like /dashboard/invoices/42 renders the root, the dashboard layout, the invoice list and the invoice detail together. On navigation, only the routes that changed reload data and re-render, so shared layouts keep their state. Strong candidates connect this to error isolation and code splitting too.
8. What do these file names mean: _index.tsx, dashboard.invoices.$id.tsx, dashboard_.print.tsx and _auth.login.tsx?
What good looks like: _index is the index route. Dots create URL segments and nesting, so the second file is /dashboard/invoices/:id inside the dashboard layout. A trailing underscore keeps the URL but escapes the parent layout, which suits a print view. A leading underscore is a pathless layout that wraps routes without adding to the URL. Bonus: $ alone is a splat route, and parentheses make a segment optional.
9. How would you build breadcrumbs that each route adds to?
What good looks like: each route exports a handle object with a breadcrumb function. The root layout calls useMatches(), keeps the matches that have one, and renders them in order. No route needs to know about its parents.
Remix v2 and React Router v7
10. What is the relationship between Remix and React Router v7?
What good looks like: in 2024 the Remix team merged Remix into React Router. What would have been Remix v3 shipped as React Router v7 in November 2024, and its "framework mode" provides loaders, actions, nested routes and server rendering. Remix v2 apps upgrade to React Router v7. The team later said the Remix name would go to a separate, new framework, so React Router v7 is the path forward for existing React apps.
Red flag: describing React Router v7 as an unrelated library and planning a full rewrite to move to it.
11. How would you upgrade a Remix v2 app to React Router v7?
What good looks like: first move to the Vite plugin and turn on the Remix v2 future flags one at a time, shipping each: v3_fetcherPersist, v3_relativeSplatPath, v3_throwAbortReason, v3_singleFetch, v3_lazyRouteDiscovery and v3_routeConfig. Then swap the @remix-run packages for react-router and the matching @react-router packages, update imports (a codemod handles most of this), and add app/routes.ts.
12. What does single fetch change?
What good looks like: a client navigation makes one request for all matching loaders instead of one per loader. Data is encoded with turbo-stream instead of JSON, so dates, Maps, Sets and promises keep their types. That is why json() and defer() are no longer needed: loaders return plain objects. Strong candidates warn that code expecting dates as strings, and per-loader headers, need checking after the switch.
Streaming, errors and forms
13. A page has fast main data and one slow panel. How do you keep the page fast?
What good looks like: await the data the page needs, start the slow request early, and return its promise without awaiting it. The component renders the panel inside Suspense with Await, and gives Await an errorElement for failures. The server streams the page and fills in the panel later. In Remix v2 without single fetch, the loader wraps the result in defer().
Red flag: deferring content that must be in the HTML for search engines, or awaiting the fast call before starting the slow one.
14. What can stop streaming from working in production?
What good looks like: a proxy or CDN that buffers whole responses, a host that does not support streaming, or no stream timeout so pending promises hang. The server entry sets that timeout (streamTimeout in React Router v7). A strong candidate checks the deployed site actually streams.
15. How do route error boundaries work?
What good looks like: a route exports an ErrorBoundary. When its loader, action or render throws, Remix shows that boundary in place of the route while parent layouts keep working. Inside it, useRouteError() returns the error and isRouteErrorResponse() separates thrown responses, such as a 404, from unexpected crashes. The root boundary must render a full document, which the root Layout export makes easy.
16. Why use Form instead of an onSubmit handler that calls fetch?
What good looks like: Form posts to the route's action with normal HTML form behavior, so it works before JavaScript loads. With JavaScript, Remix handles the submission, revalidates loaders and tracks pending state through useNavigation(). You get progressive enhancement and no hand-built API route.
Red flag: every form uses onSubmit and fetch, then manually refetches data.
17. When do you use useFetcher instead of Form?
What good looks like: when the interaction should not change the URL, such as a like button, inline row editing, a search box that loads suggestions, or many independent submissions on one page. Each fetcher has its own state and data, and actions submitted through it still trigger revalidation.
18. How do you add optimistic UI to a "mark done" button?
What good looks like: read fetcher.formData while the submission is in flight and show the value being sent. When the action finishes, revalidation brings back the real value, and if it fails, the UI falls back to the server value. Strong candidates derive the optimistic value from the pending submission instead of copying it into local state.
Deployment and production
19. What is a deployment adapter, and how do you pick one?
What good looks like: Remix is built on the web Fetch API's Request and Response, and an adapter connects that to a runtime. Options include Node with Express or the built-in app server, Cloudflare Workers and Pages, AWS through Architect, and presets maintained by hosts such as Vercel and Netlify. Pick Node when you need native modules or long-lived database connections, and an edge runtime for global latency on lighter workloads.
Red flag: not knowing that edge runtimes limit Node APIs and some database drivers.
20. How do sessions and caching work in a Remix app?
What good looks like: sessions come from createCookieSessionStorage or another storage, read in loaders and actions and saved with a Set-Cookie header from commitSession. Cookies are signed with rotating secrets and marked httpOnly, secure and sameSite. For caching, routes set Cache-Control through the headers export, and personalized pages are never cached at a shared CDN.
Behavioral (STAR)
21. Tell me about a Remix or React Router upgrade you led.
What good looks like: the Situation and starting version, the Task and its risk, the Actions (future flags one by one, tests, a rollout plan), and a Result such as no downtime or fewer client-side fetches. Listen for how they kept shipping features during the upgrade.
22. Describe a bug caused by data loading or revalidation, and how you fixed it.
What good looks like: a specific bug such as stale data after a write, a missing auth check in a child loader, or a slow loader blocking a page. They explain the root cause, the fix and how they confirmed it, such as a test or a before and after timing.
Red flag: a vague story with no root cause, or a fix that only hid the symptom.
A simple scoring rubric
Running this interview with AI
NTRVSTA's AI interviewer runs a live first round and adapts as it goes. Its exam library includes React and JavaScript, and interviews can be customized per role, so you can add the Remix topics on this page. If a candidate explains loaders and actions well, it moves to nested route security, streaming and the React Router v7 upgrade. If they struggle, it stays with the basics and can offer a hint, so you learn whether they can take a nudge and recover.
Each candidate's report includes a score breakdown and video snippets of key moments, ready to share with the hiring manager. For context on what the scores mean, read how AI interviews are scored, and see our ranking of AI interview software. You may also want our React, JavaScript and frontend developer interview questions.
Questions
Should a Remix interview use Remix v2 or React Router v7 terms?
Use whichever your team runs, and accept answers in either. The ideas are the same: loaders, actions, nested routes and forms. A candidate who knows Remix v2 and can explain what changed in React Router v7 is showing the awareness you want.
Is Next.js experience enough for a Remix role?
It transfers well for server rendering and React basics. Remix's data model is different, though: a loader and action per route, automatic revalidation after writes, and forms that work before JavaScript loads. Ask two or three loader and action questions to see how quickly a Next.js developer adjusts.
How many of these questions should a first round use?
Six to eight. Take two from loaders and actions, one on nested routes, one on the React Router v7 upgrade if you are migrating, and one each on streaming, errors and forms. Add one behavioral question at the end.
Want to watch an adaptive AI interviewer run a Remix round? Grab a 20-minute demo slot, or try a sample interview yourself with no setup.
