Instead of using useEffect and useState to fetch data while mounting a component, you can use Suspense to work with async data directly. You can define a component, which will be rendered until the data is there or if an error occurs.
So if you don’t use suspense the recommended way would probably be like in the example of lessp.
Don’t know if suspense would be the preferred way otherwise. When I tried it the last time, it was an experimental feature of react.
Anyways, I don’t see any advantage in simple component trees. Rescript is a wonderful language to model the state like this:
type state<'a> = | Loading | Loaded('a) | Error(string) ...
and use useEffect and a switch statement to render the right component at the right time.
An asynchronous function is a function that returns a promise, nothing more. It can be called as any other function. The only reason you can’t use async directly in useEffect is because it expects the return to be option<() => ()> while with async it becomes promise<option<() => ()>>.