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!

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:

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.

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:

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.

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.

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:

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 CatalogPage component is where everything comes together. Here’s a step-by-step breakdown:

1. State Management:

   • Uses useState to track the search query and current page.

2. Filtering:

   • Uses useMemo to filter the books based on the search query. This makes the search fast and efficient.

3. Pagination:

   • Calculates how many pages there are and slices the filtered list to show only the books for the current page.

4. UI Layout:

   • Renders a header, the search input, the grid of books, and the pagination controls.

5. User Experience:

   • If no books match the search, a helpful message is shown.
   • When the search query changes, the page resets to the first page to avoid empty results.

This approach keeps your code organized and makes it easy to add more features later.

One of the strengths of this setup is its scalability. You can imagine extending the catalog by plugging in a real API call in place of mockBooks. Since filtering, pagination, and rendering are already isolated into clear steps, switching the data source will not require rewriting the UI logic.

It’s also a good practice to observe how data flows:

• Data starts from mockBooks (or later from the backend).
• It is narrowed down through filtering (filtered).
• It is sliced into smaller chunks via pagination ().

In this lesson, you learned how to display mock data in your catalog using React components. You saw how to:

• Use a mock data file to provide sample books
• Render a list of books with the BookGrid component
• Add search and pagination to make the catalog easy to use
• Combine everything in the CatalogPage component

You are now ready to practice these skills in the exercises that follow. Try displaying, searching, and paginating the book list on your own. This will help you get comfortable working with data and building interactive pages. Good luck!