Remix Cheat Sheet

A reference for Remix's loaders, actions, nested file-based routing, and form-driven mutations for building server-rendered React apps.

2 PagesIntermediateFeb 28, 2026

Loaders

Fetching data on the server before a route renders.

javascript

// app/routes/posts.$postId.tsximport { json } from '@remix-run/node';import { useLoaderData } from '@remix-run/react';export async function loader({ params }) {  const post = await getPost(params.postId);  if (!post) throw new Response('Not Found', { status: 404 });  return json({ post });}export default function Post() {  const { post } = useLoaderData();  return <h1>{post.title}</h1>;}

Actions & Forms

Handling mutations with progressively-enhanced forms.

javascript

import { redirect } from '@remix-run/node';import { Form } from '@remix-run/react';export async function action({ request }) {  const formData = await request.formData();  const title = formData.get('title');  const post = await createPost({ title });  return redirect(`/posts/${post.id}`);}export default function NewPost() {  return (    <Form method='post'>      <input name='title' />      <button type='submit'>Create</button>    </Form>  );}

Core Concepts

The route-level APIs Remix is built around.

loader- server function that runs before render to fetch data for a route
action- server function that handles form submissions and mutations (POST/PUT/DELETE)
useLoaderData- hook that reads the data returned by a route's loader
useActionData- hook that reads the data returned by a route's action, e.g. validation errors
useFetcher- hook for loading or submitting data without triggering a full navigation
ErrorBoundary- route-level component rendered when a loader, action, or render throws
Nested routes- composed via file naming (e.g. posts.$postId.tsx) and rendered through <Outlet />

File-Based Route Naming

How file names map to URL paths in Remix's flat routes convention.

bash

app/routes/_index.tsx          # ->  "/"app/routes/posts._index.tsx    # ->  "/posts"app/routes/posts.$postId.tsx   # ->  "/posts/:postId"app/routes/posts.new.tsx       # ->  "/posts/new"app/root.tsx                   # root layout, renders <Outlet />, <Scripts />, <Links />

Pro Tip

Remix automatically re-runs a route's loaders after any action on the page completes, so you rarely need manual client-side cache invalidation -- just return the mutated data from the action (or nothing) and let Remix's built-in revalidation refresh the UI.

Was this cheat sheet helpful?

React Query (TanStack Query) Cheat Sheet

Gatsby Cheat Sheet