promise_once.tsx

function getRandom() {
  return fetch("https://api.quotable.io/random").then((response) => {
    if (!response.ok) {
      throw new Error("Failed to fetch quote");
    }
    return response.json();
  });
}

let initialized = false;

function QuoteOfTheDay() {
  const [quote, setQuote] = useState("");
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  if (!initialized) {
    initialized = true;
    getRandom
      .then((data) => {
        setQuote(data.content);
      })
      .catch((error) => {
        setError(error);
      })
      .finally(() => {
        setIsLoading(false);
      });
  }

  return (
    <main className={styles.main}>
      <h1>Quote of the Day</h1>
      {isLoading ? (
        <p>Loading...</p>
      ) : error ? (
        <p>Error: {error.message}</p>
      ) : (
        <blockquote>
          <p>{quote}</p>
        </blockquote>
      )}
    </main>
  );
}