Proposal : Promise render hooks

I was playing with flutter and I found the widget FutureBuilder pretty useful.

This type of component enables to render itself based on the status of a promise.

Typically, this could be used to display a “loading” state while the promise is resolved and then, display the actual component with the freshly resolved value.

Example :

function Hello() {
  
  const snapshot = usePromise(fetchData())
  
  let text = 'Loading'
  
  if (snapshot.hasValue) {
    text = snapshot.value
  }
  
  return <span>{text}</span>
}

I made an example on CodeSandbox. First, a ‘loading’ text is displayed and after a second (promise resolved), display ‘hello’.

Finally, this is just a wrapper around a useState but I found it pretty convenient (less boilercode, more expressive).

Do you think this could be a nice addition to the hooks ?

[otakustay]

I have created a simple library that may match your requirement: https://github.com/ecomfe/react-suspense-boundary

It is not published yet, but internally we use it in some apps in production, it is quite stable and performant

Any thoughts on this will be welcome, we are ready to improve this library to a community friendly and more use case covered one

[rozaxe]

@ghengeveld Oh thanks for the library ! It does what I said, will use it.

Thanks @brookslybrand for pointing the Suspence feature, I think this issue can be on hold until the fully implementation of it !