Welcome to another article of A Look at React Hooks, a beginner-friendly series on React Hooks. In this article, let's learn about the use Hook. That's right, that's the Hook name.

Note that this Hook is not yet available officially in React. If you would like to test it out, make sure your react and react-dom package version is set to "experimental".

Without further ado, let's talk about this new Hook!

About use Hook

The use Hook was revealed back in 2022 by the React team in an RFC (Request For Comments). It was a solution designed to simplify the process of data fetching by reducing the amount of boilerplate code needed to define Promises.

As you know, data fetching in React requires us to handle different states such as loading, error handling, etc. This makes the code quite chunky. Here's a typical example using useSWR from my A Look At React Hooks: useSWR for Data Fetching article.

import useSWR from "swr";
function App() {
  const fetcher = (...args) => fetch(...args).then((res) => res.json());

  // fetch data
  const { data, error } = useSWR(
    "https://jsonplaceholder.typicode.com/todos/1",
    fetcher
  );

  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;

  // render data
  return (
    <div className="App">
      <h2>{data.title}</h2>
      <p>UserId: {data.userId}</p>
      <p>Id: {data.id}</p>
      {data.completed? <p>Completed</p> : <p>Not Completed</p>}
    </div>
  );
}

export default App;

How to use use Hook

According to the RFC, the use Hook can be used like await .

// `use` inside of a React component or Hook...
const data = use(promise);

// ...roughly equates to `await` in an async function
const data = await promise;

Unlike other Hooks, use Hook has a special trait where it can be called inside conditions, blocks, and loops.

This makes it a flexible Hook when you want to add logic and conditional flow without adding more components.

Example Usage

Below, we see an example provided by the RFC on how this Hook can be used. With this Hook, a promise can be passed as an argument, enabling data to be fetched asynchronously. Additionally, the "use" Hook can be used inside an if statement, making it possible to conditionally suspend data based on certain conditions.

import { use } from "react";

function Note({id, shouldIncludeAuthor}) {
  // fetching data asynchronously
  const note = use(fetchNote(id));

  let byline = null;
  if (shouldIncludeAuthor) {
    // can be used inside if statements
    // Because `use` is inside a conditional block, we avoid blocking
    // unncessarily when `shouldIncludeAuthor` is false.
    const author = use(fetchNoteAuthor(note.authorId));
    byline = <h2>{author.displayName}</h2>;
  }

  return (
    <div>
      <h1>{note.title}</h1>
      {byline}
      <section>{note.body}</section>
    </div>
  );
}

Conclusion

In this article, we discussed some of the features and uses of the experimental use Hook. It can be a great alternative for data fetching in React.

Thank you for reading, I hope it has been a useful introduction to use and if you are curious, be sure to check out the original RFC documentation below. Cheers!

• Original RFC

Let's Connect!

• Twitter

• Showwcase

• LinkedIn

• GitHub