KanyeQuote-with-cache.tsx

import * as React from "react"
import { Quote } from "./canvas"

export function KanyeQuote() {
    const [quote, setQuote] = React.useState("")

    React.useEffect(() => {
        // load quote from local storage if it's there, fetch from API otherwise
        if (localStorage.getItem("quote")) {
            setQuote(localStorage.getItem("quote"))
        } else {
            fetch("https://api.kanye.rest/").then(response => {
                response.json().then(json => {
                    // store quote in local storage when it's first fetched
                    localStorage.setItem("quote", json.quote)
                    setQuote(json.quote)
                })
            })
        }
    }, [])

    return <Quote text={quote} />
}