Why Remix has inherent performance advantages - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data in Remix loader function.

Remix

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

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

Ahtml

Bjson

Cblob

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using res.text() instead of res.json() causes data parsing errors.

Trying to use res.html() which is not a valid method.

The loader function uses res.json() to parse JSON data from the response, which is common in Remix data loading.

2fill in blank

medium

Complete the Remix route component to use the loader data with the correct hook.

Remix

import { [1] } from '@remix-run/react';

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

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

AuseDataLoader

BuseRouteData

CuseLoaderData

DuseFetchData

Attempts:

3 left

💡 Hint

Common Mistakes

Using hooks that don't exist in Remix causes runtime errors.

Confusing loader data hook with other data fetching hooks.

Remix provides the useLoaderData hook to access data returned from the loader function.

3fill in blank

hard

Fix the error in the Remix loader to return a proper Response with JSON data.

Remix

export async function loader() {
  const data = { message: 'Hello' };
  return new Response(JSON.stringify(data), {
    headers: { 'Content-Type': [1] }
  });
}

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

A'application/json'

B'application/xml'

C'text/plain'

D'text/html'

Attempts:

3 left

💡 Hint

Common Mistakes

Setting wrong content type causes client to misinterpret data.

Forgetting to stringify the data before sending.

The response header must specify application/json for JSON data so the client knows how to parse it.

4fill in blank

hard

Fill both blanks to create a Remix loader that fetches data and returns JSON with correct headers.

Remix

export async function loader() {
  const response = await fetch('/api/info');
  const data = await response.[1]();
  return new Response(JSON.stringify(data), {
    headers: { 'Content-Type': [2] }
  });
}

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

Ajson

B'application/json'

C'text/plain'

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

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

Setting incorrect content type header.

The loader fetches JSON data using response.json() and returns it with the application/json content type header.

5fill in blank

hard

Fill all three blanks to create a Remix route component that uses loader data and displays a message.

Remix

import { [1] } from '@remix-run/react';

export default function Message() {
  const data = [2]();
  return <main><h1>[3]</h1></main>;
}

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

AuseLoaderData

C{data.message}

D"Hello from Remix!"

Attempts:

3 left

💡 Hint

Common Mistakes

Not importing the hook causes errors.

Trying to display data without JSX expression syntax.

The component imports and uses useLoaderData to get loader data, then displays the message from data inside an h1.