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

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

See code here

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 ?

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, 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.

Ok, thanks.

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

Yes, the data structure is actually coming from

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