use

Passes a promise or context resource directly inside render. It integrates with <Suspense> to suspend component rendering until promises resolve, and unlike standard Hooks, it can be called conditionally (inside if statements) and within loops.

Reading a Promise

You can read a promise directly in the render phase, causing the component to suspend until the promise resolves.

import { use } from 'react';

export const MyComponent = ({ commentsPromise }) => {
    const comments = use(commentsPromise);
    return (
        <ul>{comments}</ul>
    );
};

Reading Context

You can consume context values cleanly, similar to useContext.

import { use } from 'react';

export const MyComponent = () => {
    const theme = use(ThemeContext);
    return (
        <span>{theme}</span>
    );
};

Conditional Usage

Unlike traditional hooks, use can be called inside conditional statements or loops when needed.

import { use } from 'react';

export const MyComponent = ({ commentsPromise }) => {
    if (commentsPromise) {
        const comments = use(commentsPromise);
        return <ul>{comments}</ul>;
    }
    return null;
};