Fetch Live Rates

Open components/Converter.js and add a client-side effect that requests the current USD-based rates.

useEffect(() => {
  let cancelled = false;

  fetch("https://open.er-api.com/v6/latest/USD", {
    cache: "no-store",
  })
    .then((response) => response.json())
    .then((data) => {
      if (!cancelled && data.result === "success") {
        // merge with fallback data here
      }
    });

  return () => {
    cancelled = true;
  };
}, []);

Merge the returned rates over fallbackRates and keep USD at 1.

Test it

Reload the page with the browser network panel open and confirm a request is made to the live endpoint.

Checkpoint

The converter now has a real source of current exchange-rate data with fallback values still available.