use

The use method is part of the React API and differs from traditional React hooks. Unlike hooks, use can be called inside if and for statements. However, it must be called inside a component or another hook.

Basic Usage

The use method allows you to read the value of a Promise or a Context inside a component. Let's explore its usage for both contexts and promises.

Importing the Method

Import the use method from the React library:

import { createContext, use } from "react";

Reading Contexts

In the case of contexts, use works similarly to the useContext hook. It returns the value provided by the context to be used inside the component:

import { createContext, use } from "react";
import "../../styles.css";

const ThemeContext = createContext(null);

const UseHookWithContext = () => {
  return (
    <ThemeContext.Provider value="dark">
      <MyComponent />
    </ThemeContext.Provider>
  );
};

const MyComponent = () => {
  const theme = use(ThemeContext);
  return (
    <div className={`myContainer theme-${theme}`}>
      <h2>Hi There!</h2>
    </div>
  );
};

Output

Conditional Usage

Unlike useContext, use provides more flexibility since it can also be used conditionally using if statements:

const CodeSnippet = ({ canShow }) => {
  if (canShow) {
    const theme = use(ThemeContext);
    return <h2>Code snippet shown with {theme} theme</h2>;
  }
  return null;
};

Reading Resolved Values of Promises

use returns the resolved value of the promise to be used inside the component. It integrates with the Suspense API to display a temporary message until a promise is resolved.

Let's have a client component with a promise passed down as a prop from a server component:

"use client";

import { Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";

const DataContainer = ({ dataPromise }) => {
  return (
    <Suspense fallback={<p>Fetching Data...</p>}>
      <DataComponent dataPromise={dataPromise} />
    </Suspense>
  );
};

const DataComponent = ({ dataPromise }) => {
  const data = use(dataPromise);
  return <div>{data && data}</div>;
};

Explanation

• The promise created in a server component is passed down to the client component as a prop. This, in turn, can be passed to the use method, allowing the client component to read the resolved value of the promise.
• The Suspense API renders the element passed to the fallback prop while the promise is still pending.

Output

Handling Rejected Promises

If a promise rejects, there are two ways to display an error to the users:

1. Returning an error message in the catch block of the promise and treating it as a resolved promise:

   export function fetchData() {
     return new Promise((resolve, reject) => {
       // ...
     }).catch((err) => err);
   }

2. Wrapping the component with an ErrorBoundary:

   

Additional Information

You can find the complete code in the CodeSandbox here. Feel free to fork it and play around.

Conclusion

React has introduced several useful hooks that improve convenience for developers. The use method makes it easy to get the resolved value of a promise inside a component. Currently, React 19 is still in beta, so avoid using it in production systems. However, you can install the React 19 canary version by adding the following dependencies to your package.json file and running npm i:

"dependencies": {
  "react": "canary",
  "react-dom": "canary"
}

The React Team's new hooks, including useFormStatus, useActionState, useOptimistic, and use, provide enhanced handling for forms and promises, making development more efficient and flexible.