The coming use(promise) hook in React

You can think of use as a React-only version of await. Although you need to keep in mind that at the moment to writing this article, this hook is still not available, it’s just a mere proposal.

Index

• Introducing use hook
• Avoiding unnecessary coupling between fetching and rendering
• Caching promise responses
• Using use hook conditionally
• Conclusion

Introducing `use` hook

As mentioned above, use is meant to provide an await version for client-based components in React.

You need to remember that in Server components in React, you can use await, but in Client components, you cannot.

await in Server components

In server-side React components, you can use standard async/await the same way it’s used in plain javascript.

Server component

Some of the limitations in Server components are that they cannot access hooks. But since they are usually stateless, this doesn’t should be problematic.

use in Client components and hooks

Since await cannot be used inside Client components, React team is working on providing a special hook called use. This hook is supposed to be the React-only version of await.

Client component

This proposal of hook it’s kind of special, because it has some feature that a normal hook doesn’t have, such as that it can be nested into conditions, blocks and loops. Later on in this article will be explained the correct use of this hooks in conditionals and specific scopes.

Using `use` hook with Suspense

It’s important to keep in mind that any component using use must be rendering inside a Suspense wrapper.

This is due to the asynchronous code involved. For example, if my component Post, (which is using the new Hook) is still fetching the required data, then the component is not going to render anything. Hence, the fallback in the Suspense wrapper will be rendered.

Once the Post component finishes to fetch the data, the actual component will be rendered.

Component using Suspense

Avoiding unnecessary coupling between fetching and rendering

The useEffect hook is de facto way to fetch data into a Client Component. However, it makes rendering and data fetching strongly linked each other.

In this kind of scenarios you need to handle many things, such like the loading and error state, and the actual rendering of the component.

The minimum code would be something like this using useEffect:

However, with the use hook, you are going to be able to make a pre-fetching and then unwrap the data only if necessary.

Therefore your code will look cleaner and it will be more declarative. Let’s see and example.

You should use Suspense to handle loading.

Caching Promise responses

One of the main issues with the use hook is that every time the component re-renders, a new Promise will be created. This is not ideal, but there are some ideas about how to handle this problem.

The most likely one is to have another hook called cache. This hook will need to be used along with use and it’s main purpose is to cache the data and help React to identify when and when not it’s necessary to create a new Promise.

It’s thought to be used the following way:

Using use hook conditionally

Unlike any other hook in React, use can be called conditionally. According to the React Team, the purpose of this is to support conditionally suspending on data without needing to extract it into a separate component.

The rules about where to use use are relatively simple, because are the same rules for where to use await within an async function or yield in a generator function.

use can be called from any control flow construct, such as blocks, switch statements and loops. The only requirement is that the parent function must be a React component or hook.

The use hook, unlike most of the other hooks, doesn’t need to track state across updates. For example, useState must be executed in the same position every render so React can associate it with it’s previous state, while use doesn´t need to asociate any state. So it doesn’t need to be executed in the same position at every render.

Conclusion

At the moment to writing this article, the use hook is still not available, but chances are since it is in the Request for Comments (RFC) repo of React.

This hooks allows React to add first class support for promises in client-based components, in order to make the code more declarative, which is the main focus on React as js library.

If you are interested in reading the actual proposal, you can check it out here: First Class Support for Promises.