How does the use() hook work?

Question

Accepted Answer

use() is a new React 19 hook that allows reading promises and context OUTSIDE the rules of regular hooks (can be used in conditions and loops).

Simple analogy: Regular hooks (useState, useEffect) are like a turnstile in the subway: you must pass through it strictly in a specific place (at the top level of the component). use() is like a gate: you can pass through it anywhere, even if you already passed through the turnstile (in a condition, in a loop).

How it differs from other hooks: Regular hooks CANNOT be called in if, for, while, functions. The compiler will give an error. use() CAN be called in if, loops, callbacks.

Example with promises (integration with Suspense):

jsx

1import { use } from 'react';
2
3function Comments({ commentsPromise }) {
4    // use() will suspend the component until the promise resolves
5    // Suspense will show fallback
6    const comments = use(commentsPromise);
7    
8    return comments.map(c => <p key={c.id}>{c.text}</p>);
9}
10
11function Page() {
12    return (
13        <Suspense fallback={<Spinner />}>
14            <Comments commentsPromise={fetchComments()} />
15        </Suspense>
16    );
17}

Example with context (can be in a condition):

jsx

1function Button({ theme }) {
2    // Regular useContext
3    // But you can also do this:
4    const context = use(ThemeContext);
5    return <button className={context}>Button</button>;
6}

Important: use() is still a hook, just with more flexible calling rules. It works only inside components or other hooks.

{c.text}

); } function Page() { return ( }> ); } ``` **Example with context (can be in a condition):** ```jsx function Button({ theme }) { // Regular useContext // But you can also do this: const context = use(ThemeContext); return ; } ``` **Important:** use() is still a hook, just with more flexible calling rules. It works only inside components or other hooks.

React: How does the use() hook work?