Day 6: Modern React 19

Today's checkpoint has two parts. The first part runs in the browser: the sandbox below holds the Day 6 version of the app. The second part (the Compiler and the tests) needs real tooling, so you do it in your own project in your editor.

What changed since Day 5Copy Anchor Link

To fit in one sandbox, this version makes three simplifications. In your own project, keep what you built on Day 5.

• No router. A selectedId state stands in for the /books/:id route. In your project, BookDetail goes inside your detail route and reads id from useParams().
• No TanStack Query or localStorage. They don't change today, so leave them as they are in your project.
• react-error-boundary for the error boundary. This is the same package you used on Day 5, so nothing new to learn here.

Step 1: The add-book form becomes an ActionCopy Anchor Link

Open AddBookForm.tsx. The controlled inputs from Day 3 are gone. The form passes formAction from useActionState to its action prop. The action validates the fields, shows the book straight away with the onOptimisticAdd function it receives as a prop, waits for saveBook, and then dispatches added inside startTransition. The submit button is its own small component, so it can call useFormStatus.

Step 2: The list shows optimistic booksCopy Anchor Link

ListPage in App.tsx calls useOptimistic(books, ...). While a save is pending, the new book is in the list with pending: true, so it shows faded. When the save finishes, the real book from the reducer replaces it.

Step 3: Filters switch inside a Transition, and cards animateCopy Anchor Link

handleFilterChange wraps setFilter in startTransition. Each card sits inside <ViewTransition key={book.id}>, so React cross-fades cards in and out when the filter changes. Deleting a book is also a Transition, so its card fades away.

Step 4: The detail page suspendsCopy Anchor Link

Click Details on a book. BookExtras calls use(fetchBookDetails(book.id)). fetchBookDetails caches one Promise per id, which is important, as the first lesson explains. Click Back: because the list sits in <Activity>, your filter is still selected.

Try these things in the sandbox:

1. Submit the form with an empty author. The error appears and the title you typed stays in its input.
2. Add a real book. It appears faded at once and becomes solid about a second later.
3. Switch between filters and watch the cards fade. If nothing animates, your browser may not support the View Transitions API yet. Everything still works; the cards change without animation.
4. Open a book, wait for the details, go back, then open the same book again. The second time there's no loading message, because the Promise is cached.

Step 5: Turn on the React Compiler (in your project)Copy Anchor Link

In your Vite project, install the compiler and add it to vite.config.ts. The performance lesson explains both setups. This one is for @vitejs/plugin-react version 6 or newer:

npm install -D --save-exact babel-plugin-react-compiler@latest
npm install -D @rolldown/plugin-babel

import { defineConfig } from 'vite';
import react, { reactCompilerPreset } from '@vitejs/plugin-react';
import babel from '@rolldown/plugin-babel';

export default defineConfig({
  plugins: [
    react(),
    babel({
      presets: [reactCompilerPreset()],
    }),
  ],
});

Restart npm run dev, open React DevTools, and check that your components show the Memo badge.

Step 6: Add tests (in your project)Copy Anchor Link

Follow the testing lesson to install Vitest and Testing Library, then add src/booksReducer.test.ts and src/BookCard.test.tsx. When you're done, this command should pass:

npm test

Done?Copy Anchor Link

Your Reading List now has optimistic adds, validation errors, a suspending detail page, animated filters, compiler-optimized components and a test suite. Tomorrow you move it to Next.js, where the Actions you wrote today can run on the server.