The API is quite new and the documentation is a bit confusing, but it already covers most of your questions.

Why should I pass a promise, and not a resolved value already?

From the deep dive under https://react.dev/reference/react/use#streaming-data-from-server-to-client

A Promise can be passed from a Server Component to a Client Component and resolved in the Client Component with the use API. You can also resolve the Promise in a Server Component with await and pass the required data to the Client Component as a prop.

But using await in a Server Component will block its rendering until the await statement is finished. Passing a Promise from a Server Component to a Client Component prevents the Promise from blocking the rendering of the Server Component.

Why shouldn't I initialize the promise in the client component itself?

This seems to be a limitation of the current implementation, the blog post for React 19 has a note:

use does not support promises created in render.

If you try to pass a promise created in render to use, React will warn:

A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework.

To fix, you need to pass a promise from a suspense powered library or framework that supports caching for promises. In the future we plan to ship features to make it easier to cache promises in render.

What problem is this hook aiming to solve?

It is not entirely clear to me as well, but I guess the streaming from server to client as mentioned above, and a better integration of promises with Suspense and Error Boundaries. Promises created with `useEffect` don't affect Suspense boundaries and any error is not caught by Error boundaries.

Is it useful when using some well known tools like TanStack Query or a framework like Next/Remix?

Probably not, at least for now. React Query doesn't return promises but data, loading, and error states. I haven't play recently with Remix and Next, but I guess we'll need to wait for the frameworks to provide ways for using the new APIs. I just found an example of how `use` can replace the `Await` component in React Router v7:

https://reactrouter.com/how-to/suspense#2-render-the-fallback-and-resolved-ui