Has anyone tried the use() hook in React 19?
I was looking at the React 19 beta docs and noticed the new use() hook that directly resolves Promises or Context. But I'm confused because there aren't enough examples showing how it integrates with Suspense. Has anyone actually used it in practice? I'd appreciate it if you could share even a simple code example.
10 answers
I tried using React 19 beta in a toy project, and I liked how use() integrates naturally with Suspense. However, since it's not yet stabilized, I'm waiting for more official documentation examples. By the way, what happens if you put a conditional statement inside use()?
Oh, I saw the beta docs too and was amazed! But how do you handle error boundaries when using it with Suspense? I'm curious whether use() automatically catches thrown Promises, or if you need to wrap it with a separate ErrorBoundary.
I haven't tried it yet, but it's interesting that use() can also resolve Context. It might be more intuitive than useContext. However, I'm curious if it works in server components when used with Suspense. Does anyone know?
I actually tried it, and it's much cleaner than the existing useEffect + useState combo. To integrate with Suspense, you just need to wrap the parent component with <Suspense fallback={<Loading />}>. The downside is that it's still experimental, so I'm cautious about using it in production.
Wow, I'm excited about React 19! Using use() to directly resolve Promises will definitely make the code cleaner. But how does it compare to existing libraries like react-query or swr? It might lack caching or refetching features.
I haven't tried it yet, but since use() can also resolve Context, could it replace useContext? For example, something like const theme = use(ThemeContext)? Does anyone know?
I was curious too, so I looked it up. use() resolves a Promise directly inside a Suspense boundary. For example, using it like const data = use(fetchData()) lets Suspense automatically handle the loading state. A simple code example would be: function Profile() { const user = use(fetchUser()); return <div>{user.name}</div>; }.
Here's a simple example: function Comments() { const comments = use(fetchComments()); return comments.map(c => <p key={c.id}>{c.text}</p>); } Wrapping this with <Suspense> shows the fallback while loading. However, if you use multiple use() calls, each one requires a nested Suspense, which can make the structure a bit complex.
I tried it too, but apparently use() can't be used inside conditionals or loops. It has to follow the rules of hooks, so it can only be called at the top level. If you want to use it with Suspense, it seems better to separate the data fetching logic.
I was curious too, so I tested it in beta. use() is an abstraction of Suspense's throw promise pattern. Internally, the component throws a Promise, and Suspense catches it to display a fallback. A code example is simple: function Data() { const data = use(fetchData()); return <div>{data}</div>; }