Final assessment

Twelve questions across the whole course. Score 70% or more to pass and unlock your certificate. You can retake it as often as you like.

Finish every lesson to earn the certificate — you can take the assessment any time.

A component increments a module-level renderCount variable in its body and shows it. The number is different in development and production. Why?

Vite caches modules differently in production.
The component is impure: StrictMode renders it twice in development, so the side effect runs twice.
Production builds remove module-level variables.
React 19 renders every component twice in production.

Which expression shows the text “Watched” only when movie.watched is true, and nothing otherwise?

{movie.watched ? "Watched"}
{if (movie.watched) "Watched"}
{movie.watched && "Watched"}
{movie.watched || "Watched"}

You type in a list row’s input, and it loses focus after every keystroke. The list uses key={Math.random()}. What is happening?

Every render produces new keys, so React treats each row as new, destroys it and creates a fresh input.
Inputs inside lists cannot be controlled.
Math.random() can produce duplicate keys.
React limits how often a list can re-render.

Inside a click handler you call setFilter("watched") and then console.log(visible.length), where visible is derived from filter during render. What is logged?

The number of watched movies.
0, because state is reset while updating.
An error, because derived values cannot be read in handlers.
The length from the current render, based on the old filter.

The Watchlist stores visibleMovies in state and updates it when the filter changes. Newly added movies do not appear until the filter is clicked again. What is the best fix?

Also update visibleMovies in the add handler.
Remove the visibleMovies state and compute it during render from movies and filter.
Sync it with an Effect that depends on movies and filter.
Store the filter inside each movie object.

As soon as the page loads, React reports “Too many re-renders”. The list items contain <button onClick={handleRemove(movie.id)}>Remove</button>. What is the fix?

Wrap handleRemove in useEffect.
Change it to onClick={handleRemove} and read the id from the event.
Pass a function: onClick={() => handleRemove(movie.id)}.
Use onMouseUp instead of onClick.

A “Watched” checkbox is written as <input type="checkbox" value={watched} onChange={(e) => setWatched(e.target.value)} />. Clicking it never shows a check mark. What is wrong?

Checkboxes cannot be controlled in React.
The handler needs e.preventDefault().
watched must be a string.
Checkboxes use checked and e.target.checked, not value.

The Watchlist loads saved movies in useEffect(() => setMovies(load()), []) and saves them in another Effect on [movies]. Users report their list is sometimes wiped on reload. What is the better design?

Load in the state initializer, useState(load), so the first render already has the saved movies.
Combine both Effects into one with no dependency array.
Remove StrictMode so the Effects run once.
Save with setTimeout to give the load time to finish.

AddMovieForm keeps the typed title in its own state; App owns the movies. Where should the “clear the field after adding” logic live?

In App, by passing a clear prop down to the form.
In an Effect in the form that watches the movies list.
In the form’s submit handler, right after calling onAdd.
In MovieList, after it renders the new item.

You want the active filter button styled differently, and you already set aria-pressed={value === key} on each one. Which Tailwind approach fits best?

Add aria-pressed:bg-indigo-600 aria-pressed:text-white to the button’s classes.
Build the class with a template literal from the filter name.
Add a useEffect that sets the button’s style through the DOM.
Create a tailwind.config.js with an active color.

Your app calls a paid movie API with import.meta.env.VITE_MOVIE_API_SECRET. Why is this a problem?

Vite does not support environment variables in production.
Vercel strips VITE_ variables from builds.
The variable name is too long.
VITE_ values are inlined into the public JavaScript bundle, so anyone can read the secret.

You extract a Card component that renders a border, padding and {children}, and use it for movie items and the empty state. What is the main benefit?

Cards render faster than divs.
The frame is defined once, so style changes happen in one place and each use only supplies its content.
React requires every list item to be wrapped in a component.
It lets the empty state share state with the movie items.

12 questions unanswered