Wadad Parker Comments - Answer Overflow

Wadad Parker

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

Data Fetching with React 19

Yes, it's not really about the use API. I just want to know, in the above scenario where we use useState + useEffect, how can we leverage React 19's new Hooks to do the same functionality?

39 replies

TTCTheo's Typesafe Cult

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

Data Fetching with React 19

39 replies

TTCTheo's Typesafe Cult

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

Data Fetching with React 19

This does not work either, it expects the component to be a server component. If use api can only use promises inside a client component. Then that is fine. I just want to know am not doing anything wrong or it's not meant to be used that way. Regardless, just want to know how would you do that useState + useEffect logic in React 19 for getting a result of a promise

39 replies

TTCTheo's Typesafe Cult

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

Data Fetching with React 19

import QRCode from 'qrcode';

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

const TicketCard = () => {

  const qrCode1 = 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%,97% 95%,1% 95.65%)"}}>
      <header className="ml-2" 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={qrCode1} />
      dwd
    </aside>
  )
}

import QRCode from 'qrcode';

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

const TicketCard = () => {

  const qrCode1 = 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%,97% 95%,1% 95.65%)"}}>
      <header className="ml-2" 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={qrCode1} />
      dwd
    </aside>
  )
}

None the less, this is not about debugging the use api. All I want to know is, how to use the new hooks & apis of React 19 to literally replace the dreaded useState + useEffect code combo for executing a single async function inside a component >_<

39 replies

TTCTheo's Typesafe Cult

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

Data Fetching with React 19

This code does not work, it gives the following error, expecting this to be a server component react-dom_client.js?v=fbf25467:4472 Uncaught Error: An unsupported type was passed to use(): async () => { return await QRCode.toDataURL("https://x.com/wadadparker") Also, React 19 uses React Compiler to already memoize all the variables n functions. Hence it is no longer required to use useMemo. And I did encounter a weird bug of the function running 202 times when I used a useMemo.

39 replies

TTCTheo's Typesafe Cult

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

Data Fetching with React 19

Am not using Typescript, but this is giving runtime error. Breaks the app. The cb Returns a Data URI containing a representation of the QR Code image. Essentially a longggg data:image/png data uri. And I don't know why the use API would need a type, just returning data, it works fine with normal setState right? I just want to know if use is not the way, then what should be the React 19 way of refacotoring the above code?

39 replies

Gaming

Programming