Motivation for using AsyncResult AsyncData in inputs in rescript react realworld example app

1

In rescript react realworld example app inputs AsyncResult and AsyncData are used instead of direct use of useState hook.

See code here https://github.com/jihchi/rescript-react-realworld-example-app/blob/main/src/page/Editor.res

What problem does this adress ?

I’m guessing that it has to do with a new change starting before the end of the precedent finishes. Is there any documentation about this particular problem ? Is there an equivalent in plain js ?

2

It’s to work with a type, that in typescript would look something like this:

export type AsyncResult<T, E = Error> =
  | { data: T; error: undefined, isLoading: false }
  | { data: undefined; error: E, isLoading: false }
  | { data: undefined; error: undefined, isLoading: true };

You can come across it in many data fetching libraries like https://swr.vercel.app/, TanStack Query | React Query, Solid Query, Svelte Query, Vue Query, RTK Query Overview | Redux Toolkit.

It’s used to keep the state of a request, and render a component depending on it.

3

Ok, thanks.

So, it’s not really useful for the input value state but more for the form submition later on.

4

Yes, the data structure is actually coming from https://reazen.github.io/relude.

You can find more information about it in the source code: