skip to Main Content

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.

2

Answers


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

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search