# A Look At React Hooks: The New `use` Hook

Welcome to another article of [**A Look at React Hooks**](https://lo-victoria.com/series/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!

> Edit: This hook is now in the latest React 19!

# About `use` Hook

The `use` Hook was revealed back in 2022 by the React team in an [RFC](https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md) (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](https://lo-victoria.com/a-look-at-react-hooks-useswr-for-data-fetching-in-react) article.

```javascript
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` .

```javascript
// `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](https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md) 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.

```javascript
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](https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md)
    

### **Let's Connect!**

* [**Twitter**](https://twitter.com/lo_victoria2666)
    
* [**Showwcase**](https://www.showwcase.com/victoria-lo)
    
* [**LinkedIn**](https://www.linkedin.com/in/victoria2666/)
    
* [**GitHub**](https://github.com/victoria-lo)