Why advanced patterns solve real-world complexity in Remix - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Remix loader function that fetches data.

Remix

export async function loader({ request }) {
  const data = await fetch('/api/data').then(res => res.[1]());
  return data;
}

Drag options to blanks, or click blank then click option'

Ahtml

Btext

Cblob

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using res.text() instead of res.json()

Forgetting to await the promise

The loader function should parse the response as JSON using res.json() to get usable data.

2fill in blank

medium

Complete the code to use Remix's useLoaderData hook inside a component.

Remix

import { useLoaderData } from '@remix-run/react';

export default function MyComponent() {
  const data = [1]();
  return <div>{data.message}</div>;
}

Drag options to blanks, or click blank then click option'

AuseActionData

BuseRouteData

CuseLoaderData

DuseFetcher

Attempts:

3 left

💡 Hint

Common Mistakes

Using useActionData which is for actions

Using useFetcher which is for manual fetches

useLoaderData is the hook to access data returned by the loader function in Remix.

3fill in blank

hard

Fix the error in the Remix action function to correctly handle form data.

Remix

export async function action({ request }) {
  const formData = await request.[1]();
  const name = formData.get('name');
  return { success: true, name };
}

Drag options to blanks, or click blank then click option'

Ajson

BformData

Ctext

Dformdata

Attempts:

3 left

💡 Hint

Common Mistakes

Using request.json() for form data

Incorrect casing like formdata()

The correct method is request.formData() to parse form submissions.

4fill in blank

hard

Fill both blanks to create a Remix route that redirects after an action.

Remix

import { redirect } from '@remix-run/node';

export async function action({ request }) {
  // process form
  return [1]('/success');
}

export default function Form() {
  return <form method=[2]>{/* form fields */}</form>;
}

Drag options to blanks, or click blank then click option'

Aredirect

Bpost

Cget

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET method for form submission

Returning JSON instead of redirect

Use redirect to send the user to another page after action. The form method should be post to submit data.

5fill in blank

hard

Fill all three blanks to create a Remix loader that fetches user data and handles errors.

Remix

import { json } from '@remix-run/node';

export async function loader({ params }) {
  try {
    const response = await fetch(`/api/users/$[1]`);
    if (!response.ok) throw new Error('Failed to load');
    const user = await response.[2]();
    return [3](user);
  } catch (error) {
    throw new Response('Not Found', { status: 404 });
  }
}

Drag options to blanks, or click blank then click option'

Aparams.userId

Bjson

Dparams.id

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong param name

Not using Remix's json helper

Forgetting to check response.ok

Use params.userId to get the user ID from URL params, parse response with response.json(), and return data wrapped in json() from Remix.