Wadad Parker Posts - Answer Overflow

Wadad Parker

•Created by Wadad Parker on 12/29/2024 in #questions

Data Fetching with React 19

So React 19 is all about coming up with new patterns of Data fetching. I was figuring out how to do this in a hobby project. Below is a code, simply takes in a text and generates a QR code. The qr code is just an example for async await action.

 const generateQRCode = async () => {
  return await QRCode.toDataURL("https://x.com/wadadparker")
}

const TicketCard = () => {

  // const qrCode = use(generateQRCode)
  const [qrCode,setQrCode] = useState(null);

  useEffect(()=>{
    const asyncCall = async() => {
      try{
        const data = await generateQRCode();
        if(data)
          setQrCode(data)
      }
      catch(error) { console.log(error)}
    }
    asyncCall()
  },[])

  return (
    <aside className="flex flex-col items-center justify-around w-full h-full bg-bg-light "
     style={{clipPath:"polygon(7% 1.5%,99.7% 0.4%,100% 94%,1% 95.65%)"}}>
      <header className="" style={{WebkitTextStroke:"1.84px black",textShadow:"3.68px 4.29px 0 black"}}>
        <h1 className="text-primary-dark font-bold text-6xl text-nowrap">ANIME CON</h1>
        <h2 className="text-primary-dark font-bold text-5xl">Hubli</h2>
      </header>
      <img className="w-80 object-cover bg-transparent" src={qrCode} />
      dwd
    </aside>
  )
}

 const generateQRCode = async () => {
  return await QRCode.toDataURL("https://x.com/wadadparker")
}

const TicketCard = () => {

  // const qrCode = use(generateQRCode)
  const [qrCode,setQrCode] = useState(null);

  useEffect(()=>{
    const asyncCall = async() => {
      try{
        const data = await generateQRCode();
        if(data)
          setQrCode(data)
      }
      catch(error) { console.log(error)}
    }
    asyncCall()
  },[])

  return (
    <aside className="flex flex-col items-center justify-around w-full h-full bg-bg-light "
     style={{clipPath:"polygon(7% 1.5%,99.7% 0.4%,100% 94%,1% 95.65%)"}}>
      <header className="" style={{WebkitTextStroke:"1.84px black",textShadow:"3.68px 4.29px 0 black"}}>
        <h1 className="text-primary-dark font-bold text-6xl text-nowrap">ANIME CON</h1>
        <h2 className="text-primary-dark font-bold text-5xl">Hubli</h2>
      </header>
      <img className="w-80 object-cover bg-transparent" src={qrCode} />
      dwd
    </aside>
  )
}

When I use the "use" api, it gives me an error. Now idk if am doing anything wrong. But what exactly is the new way to fetch api calls or async functions in React 19 just like it's done in the above example? And yes, am aware of React Query, but I just want to learn how to do this in React without React Query.

An unsupported type was passed to use(): async () => {
  return await QRCode.toDataURL("https://x.com/wadadparker");
}

An unsupported type was passed to use(): async () => {
  return await QRCode.toDataURL("https://x.com/wadadparker");
}

Would appreciate your help, thank you

39 replies

Gaming

Programming