20

There is a new cool feature in React — Suspense component. Currently it only officially supports components created using React.lazy function. But unofficially it well known that internally Suspense component is triggered by throwing a promise deeper in the render tree and there are some libraries that have already adopted this technique to bring a new cool developer experience, for example:

Also there is a core react package react-cache which uses it (unofficially of course).

Having all this in mind I'm kinda confused because there is no any mention in React Docs about throwing promises (in other words what triggers Suspense component) but at the same time there are lots of talks and libraries that use it. In twitter discussion dan abramov replied that the API will likely change. But still the situation is confusing.

So the question is: Is it safe to start using this technique in the production? If not, then how can I use libraries (even facebook based) that have already adopted it? Finally, if the API (throwing promises) is the subject to be changed in future, can I be assured that it's just a tiny change that I need to adopt in my own implementation?

Thanks folks!

Update

According to these issues (one, two) it seems like they still not sure about the future API. Most likely they will offer a public API (probably they mean react-cache or something more general) which is essentially just a wrapper around throwing Promise mechanism.

Alexandr Yushkov
  • 200
  • 1
  • 7

2 Answers2

10

Short answer

No, it's not safe. Even if other libraries uses it you should not write code on the basis of React internals (and certainly not in production!)

Long answer

Those libraries that uses React internals will probably bump a new version compatible with every new version of React - it's kind of the maintainers job.

The problem that you could run into is that the maintainers won't update their libraries to support the latest version of React, and that would hold you down to an old version of React.

Anyhow, in cases like relay, you can use the library without worry too much about the maintenance. Libraries like relay are heavily used from Facebook (at least from what I know), so the maintenance won't be a problem.

Using React internals in your application

That's a very bad idea (in my opinion). If you want to do that it means that you'll need to keep up with the React internals. If the API of suspense changes (and they will) you'll need to rewrite all the components that uses that API in order to upgrade React, which is not funny.

If you want my advice: stick with the official versions of React.

Nicholas Peretti
  • 147
  • 8
  • 1
    Thanks for the response. I agree with you. The situation is becoming more and more dangerous since lots of popular libraries are already using it. I do hope that eventually the low level API will remain the same and they'll just offer a stable public API. – Alexandr Yushkov Jan 26 '20 at 15:13
-1

in 2022 year you can throw promise to trigger Suspense

const Component = () => {

  // this trigger ErrorBoundary
  throw new Error()

  // this trigger Suspense
  throw new Promise()

}

if tou throuthted object has .then method, React will think that is Promise

Иван Вольнов
  • 109
  • 1
  • 8
  • Is it officially supported and documented now? – Bergi Aug 13 '22 at 16:37
  • it's official and it came with react 18. i documentation it's called `resource` – Иван Вольнов Aug 13 '22 at 16:39
  • @Bergi i think this not be changed https://17.reactjs.org/docs/concurrent-mode-suspense.html – Иван Вольнов Aug 13 '22 at 17:12
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 17 '22 at 08:34
  • Hey Ivan, I'm not sure if it's official as it's still marked as an experimental feature in React Docs. The only mention I could find is https://reactjs.org/blog/2022/03/29/react-v18.html#suspense-in-data-frameworks where they stated that it's still not recommended. – Alexandr Yushkov Aug 22 '22 at 08:40
  • There are some 3rd-party libraries that officially support Suspense now (e.g. Next.js) but I still haven't found any official documentation on how to use it for arbitrary data fetching (i.e. how the API actually works). – jtbandes Dec 23 '22 at 02:37