Save Wishlist Changes

Persist the ids whenever they change, but do not immediately overwrite storage with an empty array before the first browser read finishes.

Step 1 — Add the persistence effect

Create a second effect that depends on both ids and ready.

useEffect(() => {
  if (!ready) return;

This guard is important: the first render should not replace a real stored list with the initial empty state.

Step 2 — Write the ids

Serialize the current array and write it to the same storage key.

window.localStorage.setItem(STORAGE_KEY, JSON.stringify(ids));

Step 3 — Keep the two effects separate

One effect loads from storage; the second saves changes. Keeping those responsibilities separate makes the lifecycle easy to reason about and test.

Checkpoint

Add a movie, refresh, remove it, and refresh again. The stored list should follow the latest state through both directions.