useLoaderData hook in Remix - Mini Project: Build & Apply

Using the useLoaderData Hook in Remix

📖 Scenario: You are building a simple Remix app page that shows a list of books fetched from a server.

🎯 Goal: Create a Remix route component that loads book data using a loader function and displays the book titles using the useLoaderData hook.

📋 What You'll Learn

Create a loader function that returns a list of books

Use the useLoaderData hook to access the loaded data

Render the list of book titles in the component

💡 Why This Matters

🌍 Real World

Fetching data on the server and using it in React components is common in web apps. Remix's useLoaderData hook makes this easy and efficient.

💼 Career

Understanding data loading and hooks in Remix is valuable for building modern full-stack React applications.

1

Create the loader function with book data

Create a loader function called loader that returns an array of book objects with these exact entries: { id: 1, title: 'The Hobbit' }, { id: 2, title: '1984' }, and { id: 3, title: 'Pride and Prejudice' }.

Remix

# Your code here

Hint

The loader function should return the book list wrapped in json() from @remix-run/node.

2

Import useLoaderData hook

Import the useLoaderData hook from @remix-run/react at the top of the file.

Remix

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

export const loader = () => {
  return json([
    { id: 1, title: 'The Hobbit' },
    { id: 2, title: '1984' },
    { id: 3, title: 'Pride and Prejudice' }
  ]);
};

Hint

Use import { useLoaderData } from '@remix-run/react' to get the hook.

3

Use useLoaderData to get books in component

Create a default exported function component called Books. Inside it, use const books = useLoaderData() to get the book data.

Remix

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

export const loader = () => {
  return json([
    { id: 1, title: 'The Hobbit' },
    { id: 2, title: '1984' },
    { id: 3, title: 'Pride and Prejudice' }
  ]);
};

// Your code here

Hint

Define the component and call useLoaderData() to get the books.

4

Render the list of book titles

Inside the Books component, return a <ul> element that maps over books and renders each book's title inside a <li> with a key set to the book's id.

Remix

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

export const loader = () => {
  return json([
    { id: 1, title: 'The Hobbit' },
    { id: 2, title: '1984' },
    { id: 3, title: 'Pride and Prejudice' }
  ]);
};

export default function Books() {
  const books = useLoaderData();
  // Your code here
}

Hint

Use books.map() to create list items inside a <ul>.