Wadad Parker Posts - Answer Overflow

Wadad Parker

•Created by Wadad Parker on 1/31/2025 in #questions

Caching loaders in React Router v7

Looked into React Router v7. The RSC support is amazing as well, and I agree with the perspective of calling db on "render". Now just wanted to know about caching? I think the biggest reason for wide adoption of React Query was for it's Cache which made it seem fast to the user. Now, is there like some example where we can combine the best of both worlds and store the loader data from route into the useQuery as a Cache? Cuz that's what I've read in a tweet showed in one of Theo's videos. Or we supposed to use a CDN? I understand clientLoaders can use HTTP Caching. But what about the server loaders ? Especially RSCs? Could not find any resource about caching anywhere. Would be great help if anyone could explain how this can be achieved. I would then present it in my company so that we can use RSCs to cut out TTFB on user's home page n other "non changing" data pages. ( Not a forced rewrite, we will be revamping our entire app & founder has asked me thinks of ways of making the existing Frontend experience faster ) Thank you!

2 replies

TTCTheo's Typesafe Cult

•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