Displaying Mock Data

Introduction: The Role of Mock Data in the Catalog

Welcome back! In the previous lessons, you learned how to set up a consistent layout for your React app and created some useful UI components, such as a search input and pagination control. Now, you are ready to see how these pieces come together to display real content — starting with mock data . Mock data is sample information that you use to build and test your app before connecting to a real backend. In this lesson, you will learn how to display a list of books in your catalog using mock data. You will also see how to add search and pagination so users can easily browse and find books. By the end of this lesson, you will know how to: Show a list of books using a reusable component Filter the list based on a search query Split the list into pages with pagination Let’s get started!

Using Mock Data for Catalog Development

As a quick reminder, your project is organized into features, and the catalog feature is where you will display your list of books. The mock data for the catalog is stored in a file called mockData.ts . Here is what the mockData.ts file looks like: TypeScript // src/features/catalog/mockData.ts export type Book = { id: number; title: string; author: string }; export const mockBooks: Book[] = [{ id: 1, title: "Dune", author: "Frank Herbert" }, { id: 2, title: "The Hobbit", author: "J.R.R. Tolkien" }, { id: 3, title: "Project Hail Mary", author: "Andy Weir" }, { id: 4, title: "1984", author: "George Orwell" }, { id: 5, title: "Brave New World", author: "Aldous Huxley" }, { id: 6, title: "Foundation", author: "Isaac Asimov" }, { id: 7, title: "Hyperion", author: "Dan Simmons" }, { id: 8, title: "Neuromancer", author: "William Gibson" }, { id: 9, title: "Snow Crash", author: "Neal Stephenson" }, { id: 10, title: "The Left Hand of Darkness", author: "Ursula K. Le Guin" },]; This file exports a Book type and an array of book objects. Each book has an id, title, and author . You will use this data to display the catalog. Note: In this lesson, the mock data is mainly a stand-in to help you understand how data is structured and how the UI will consume it. In the upcoming courses, we will move away from this static mock file and instead fetch books dynamically from our NestJS backend API, using a /books endpoint. If you are curious and want to peek ahead, the backend server is already part of this course. You can open a new terminal and run curl localhost:3001/books to see the list of books returned directly from the API.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Displaying Books with BookGrid

To show the list of books, you will use a component called BookGrid. This component takes an array of books and displays each one as a card.

Here is how the BookGrid component works:

TSX

// src/features/catalog/BookGrid.tsx
import BookCard from "./BookCard";
import type { Book } from "./mockData";

type Props = {
  books: Book[];
};

export default function BookGrid({ books }: Props) {
  if (books.length === 0) {
    return <p className="text-slate-400">No books match your search.</p>;
  }

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      {books.map((book) => (
        <BookCard key={book.id} title={book.title} author={book.author} />
      ))}
    </div>
  );
}

// src/features/catalog/BookGrid.tsx
import BookCard from "./BookCard";
import type { Book } from "./mockData";

type Props = {
  books: Book[];
};

export default function BookGrid({ books }: Props) {
  if (books.length === 0) {
    return <p className="text-slate-400">No books match your search.</p>;
  }

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      {books.map((book) => (
        <BookCard key={book.id} title={book.title} author={book.author} />
      ))}
    </div>
  );
}

Explanation:

The BookGrid component receives a books prop, which is an array of Book objects.
If the array is empty, it shows a message: “No books match your search.”
Otherwise, it creates a grid layout and renders a BookCard for each book.
Each BookCard displays the book’s title and author.Additionally, consider how BookGrid cleanly separates concerns: it does not worry about search or pagination. Its sole responsibility is presentation. This design pattern makes it reusable and easier to test.

Example Output:

If you pass the first three books from mockBooks to BookGrid, you will see three book cards in a row, each showing the title and author.

Note: Here, we you can also use map((book, index) => …) which also exposes the index of each item. While in this example the id is used as the key, having access to the index can sometimes be useful, for example if you want to style every second or third card differently, or show the position of a book in the list. Just remember that while the index is handy, the id should remain your key to keep React’s rendering efficient and predictable.

Understanding useMemo Before We Add Search and Pagination

Before we move on to adding search and pagination, let’s pause and understand useMemo, because it plays an important role in the next section.

useMemo is a React hook that lets you cache the result of an expensive calculation. Instead of recalculating on every render, it only recomputes the value when its dependencies change. In our case, the “expensive calculation” is filtering a list of books based on the user’s search input.

Why is this helpful here?

Filtering is not very heavy with just 10 mock books, but in a real app with hundreds or thousands of items, running filter logic on every render would quickly become inefficient.
By wrapping the filter logic with useMemo, we ensure React only recomputes the filtered list when the query changes.
This optimization makes the catalog more scalable and efficient without changing the user-facing behavior.

Other examples where useMemo is commonly used:

Sorting a list: If you have a list of items and want them sorted alphabetically or by date, sorting can be cached with useMemo so it only runs when the list changes.
Derived values: If you need to compute something like the average rating of a set of books, you can wrap that calculation in useMemo so it doesn’t recalculate unless the ratings change.
Expensive transformations: Complex data transformations (like formatting large sets of records) benefit from memoization.

In short, useMemo is about performance and efficiency, and you’ll see it applied in the next section when filtering books.

TSX

// Example 1: Sorting a list with useMemo
const sortedBooks = useMemo(() => {
  return [...books].sort((a, b) => a.title.localeCompare(b.title));
}, [books]);

// Example 2: Calculating a derived value
const averageRating = useMemo(() => {
  if (ratings.length === 0) return 0;
  return ratings.reduce((a, b) => a + b, 0) / ratings.length;
}, [ratings]);

// Example 3: Expensive transformation
const formattedData = useMemo(() => {
  return rawData.map((item) => ({ ...item, label: item.name.toUpperCase() }));
}, [rawData]);

// Example 1: Sorting a list with useMemo
const sortedBooks = useMemo(() => {
  return [...books].sort((a, b) => a.title.localeCompare(b.title));
}, [books]);

// Example 2: Calculating a derived value
const averageRating = useMemo(() => {
  if (ratings.length === 0) return 0;
  return ratings.reduce((a, b) => a + b, 0) / ratings.length;
}, [ratings]);

// Example 3: Expensive transformation
const formattedData = useMemo(() => {
  return rawData.map((item) => ({ ...item, label: item.name.toUpperCase() }));
}, [rawData]);

You might be wondering: why do we even need to cache something like sorting or calculating an average? The reason is that React components can re-render many times — for example, whenever state or props change. If you don’t use useMemo, the sorting or calculation would run again on every single render, even if the data hasn’t changed. This can slow down your app if the operation is complex or the dataset is large.

That’s where useMemo helps: it remembers (“memoizes”) the result of your calculation and only recomputes it when the data it depends on changes.

This brings us to the dependency list — the array you see as the second argument to useMemo, like [books] or [ratings]. The items in this array tell React:

“Only recalculate this memoized value if one of these dependencies has changed.”
For example, useMemo(() => sortBooks(), [books]) means React will only re-run the sorting function when the books array changes. If the component re-renders for some other reason (like a search query change), the previous sorted result is reused.

So in simple terms:

Without useMemo, React re-runs your sorting or calculation every render.
With useMemo, React only re-runs it when the specified data (dependencies) changes.
This makes your app much more efficient.

Adding Search and Pagination to the Catalog

To make the catalog more useful, you want users to be able to search for books and browse through pages of results. This is handled in the CatalogPage component.

Here is the main logic for filtering and paginating the books:

TSX

// src/features/catalog/CatalogPage.tsx
import { useMemo, useState } from "react";
import { mockBooks } from "./mockData";
import BookGrid from "./BookGrid";
import SearchInput from "../../components/SearchInput";
import Pagination from "../../components/Pagination";

const PAGE_SIZE = 8;

export default function CatalogPage() {
  const [query, setQuery] = useState("");
  const [page, setPage] = useState(1);

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return mockBooks;
    return mockBooks.filter(
      (b) => b.title.toLowerCase().includes(q) || b.author.toLowerCase().includes(q)
    );
  }, [query]);

  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
  const start = (page - 1) * PAGE_SIZE;
  const paged = filtered.slice(start, start + PAGE_SIZE);

  // Keep page within bounds when query changes
  if (page > totalPages) {
    setPage(totalPages);
  }

  return (
    <section>
      <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-6">
        <div>
          <h1 className="text-3xl font-bold">Book Catalog</h1>
          <p className="mt-2 text-slate-400">Browse our collection of books.</p>
        </div>
        <div className="w-full md:w-80">
          <SearchInput
            value={query}
            onChange={(e) => { setQuery(e.target.value); setPage(1); }}
            placeholder="Search by title or author"
            aria-label="Search books"
          />
        </div>
      </div>

      <BookGrid books={paged} />
      <Pagination page={page} totalPages={totalPages} onChange={setPage} />
    </section>
  );
}

// src/features/catalog/CatalogPage.tsx
import { useMemo, useState } from "react";
import { mockBooks } from "./mockData";
import BookGrid from "./BookGrid";
import SearchInput from "../../components/SearchInput";
import Pagination from "../../components/Pagination";

const PAGE_SIZE = 8;

export default function CatalogPage() {
  const [query, setQuery] = useState("");
  const [page, setPage] = useState(1);

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return mockBooks;
    return mockBooks.filter(
      (b) => b.title.toLowerCase().includes(q) || b.author.toLowerCase().includes(q)
    );
  }, [query]);

  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
  const start = (page - 1) * PAGE_SIZE;
  const paged = filtered.slice(start, start + PAGE_SIZE);

  // Keep page within bounds when query changes
  if (page > totalPages) {
    setPage(totalPages);
  }

  return (
    <section>
      <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-6">
        <div>
          <h1 className="text-3xl font-bold">Book Catalog</h1>
          <p className="mt-2 text-slate-400">Browse our collection of books.</p>
        </div>
        <div className="w-full md:w-80">
          <SearchInput
            value={query}
            onChange={(e) => { setQuery(e.target.value); setPage(1); }}
            placeholder="Search by title or author"
            aria-label="Search books"
          />
        </div>
      </div>

      <BookGrid books={paged} />
      <Pagination page={page} totalPages={totalPages} onChange={setPage} />
    </section>
  );
}

Explanation:

query stores the current search text, and page stores the current page number.
The filtered variable contains only the books that match the search query (by title or author).
The paged variable contains only the books for the current page.
The SearchInput lets users type a search query. When the query changes, the page resets to 1.
The Pagination component lets users move between pages.
The BookGrid displays the books for the current page. Notice how useMemo is applied around the filtering logic. This is important because it prevents unnecessary recalculations of the filtered list every time the component re-renders. Without it, filtering would run on every keystroke even if the query didn’t change.

Another subtle but crucial piece is resetting the page back to 1 whenever the query changes. Without this, you could search for something, land on page 3, and see an empty grid because the filtered list is too short. Resetting ensures that the user always starts from the first page when applying a new search filter.

Also, the guard if (page > totalPages) setPage(totalPages) prevents the app from getting stuck on a page number that doesn’t exist after filtering. For example, if you were on page 3 with 20 results, and then searched something that only returns 4 results, this safeguard brings you back to page 1 instead of showing an empty screen.