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.
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.
Would appreciate your help, thank you
26 Replies
The error snippet you have suggests there's a type mismatch. What's the output type of QRCode.toDataURL, and what type does the use() API expect?
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?
based on what I remember from the documentation, use expects a promise, but you provided a function that returns a promise
I'm not even sure where that is in the example he provided
he commented it out above his set state line
Thank you!
Okay yeah I see the problem lol
Think the solve here is literally just to make the generateQrCode argument be a function call.
also you wanna wrap the generateQrCode promise result in useMemo so that it isn't executed every time you component is ran
Good point!
Did not realize useMemo returned a promise that's incredibly handy
well it's going to return whatever you return inside it
Right, okay I see
in this case generateQrCode() will return a promise
And if you were to return a string, it would return a string, etc.
correct
I should be using it in my apps more ngl
But that's a separate thing
yeah a lot of people do not use useMemo and useCallback enough
this makes your app very inefficient
in some cases it comes from confusion about how they work
hooks are quite dificult to understand at first
Mind if I pick your brain a sec in #tech-discussion ? Think we're just about done here.
sure
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.
Could you send the exact code you ran?
Also I didn’t know that the thing about it automatically memoizing things. I’ll have to read up on that
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 >_<
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
"use client" at the top of the file.
The error is that it says the above code will only work in server component. But this is a client component in pure react 19 application with vite.
Ah hm
Interesting
Will get back to you on that
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?