use(): the React new experimental hook 🚀

There is currently a discussion within the JavaScript community and the React team regarding a new hook called "use". There seems to be a lot of excitement surrounding this upcoming feature, and many are exploring its implementation and potential uses in the near future.

RFC: First class support for promises and async/await

React's RFC GitHub repository is a platform where new features and community suggestions are discussed and reviewed.

Why is it introduced?

Adds first class support for reading the result of a JavaScript Promise using Suspense:

• Introduces support for async/await in Server Components. Write Server Components using standard JavaScript await syntax by defining your component as an async function.
• Introduces the use Hook. Like await, use unwraps the value of a promise, but it can be used inside normal components and Hooks, including on the client.

This enables React developers to access arbitrary asynchronous data sources with Suspense via a stable API.

As it is still an experimental feature, it is advisable to refrain from using it in production as the API may undergo changes or might not be included in the next React version. However, it presents a great opportunity to test and explore its possibilities in a development environment.

Prepare the project

I'll be using Vite + React boilerplate project. To create a new project run the below code in the terminal and follow along.

yarn create vite

success Installed "create-vite@4.1.0" with binaries:
      - create-vite
      - cva
✔ Project name: … vite-project
✔ Select a framework: › React
✔ Select a variant: › JavaScript

Once the setup is successfully completed, a new folder with name vite-project is created with some files into it. Experimental version of React and React-DOM is required in order to have access to the new feature use hook.

cd vite-project

## inside the folder

yarn add react@experimental react-dom@experimental

[Before] How do we fetch data?

//src/App.jsx
import { useEffect, useState } from "react";

function App() {
  const [users, setUsers] = useState();

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((json) => setUsers(json));
  }, []);

  if (!users) return <div>Loading...</div>;

  return <div>{JSON.stringify(users, null, 2)}</div>;
}

export default App;

[After] How the new use hook would look like?

// src/App.jsx
import { use, Suspense } from "react";

const getUsers = fetch("https://jsonplaceholder.typicode.com/users").then(
  (res) => res.json()
);

function App() {
  const users = use(getUsers);

  return (
    <Suspense fallback={<div>Loading...</div>}>
      <div>{JSON.stringify(users, null, 2)}</div>
    </Suspense>
  );
}

export default App;

Clearly, we can see some great benefits like:

[x] no useState
[x] no useEffects
[x] simpler API

Conclusion

The React team and community are actively working towards creating better solutions for fetching data and server components. This will result in a simpler and more efficient way to natively control data fetching with server component support.

You may also like my other articles:

• useState
• useEffect
• useMemo

💌 If you'd like to receive more tutorials in your inbox, you can sign up for the newsletter here.

Please let me know if there's anything else I can add or if there's any way to improve the post. Also, leave a comment if you have any feedback or suggestions.