There is no difference. There in no performance difference or functionality difference. In fact they both reference the same exact function.

import React, { useEffect } from 'react'
React.useEffect === useEffect // true

So which to use is entirely down to your preferences.

Some people like to have an namespace for React stuff so you can type React.use and have your IDE's autocomplete give you nice suggestions.

Some people like to keep line length shorter by importing the functions directly.

It's up to you. Neither is obviously wrong.

One thing that maybe matters is that a smart bundler may be able to tree shake things you aren't using, which makes the code you are shipping to the user smaller.

If you do import React from 'react'; React.useState() then the bundler must include the entire React object. But if you import { useState } from 'react', then the bundle may be able to include only the useState function in the final bundle.

I say may because bundling is complicated. And not all modules that you import may be tree shaken in this way. And for React, you probably are including all of React in your bundle anyway.

But for these reasons, I'd argue it's a reasonable habit to get into when the module you are importing supports it.

And for what it's worth, the react docs import each function individually.

With use you still need to manage the promise itself, probably in state. use is about providing an ergonomic way to hook into Suspense by way of working with promises directly, and not about fundamentally replacing state management. It does of course make it easier though (no more tracking loading states).

The JokeItem example provided probably does not achieve what you want since every time the promise resolves, the component will re-render and apiCall() would be called again which presumably would give a new unresolved promise. I.e. it would be in a waterfall loop.

A better representative example is this:

import { use, useState, Suspense } from "react";

export default function App() {
  const [apiCallPromise, setApiCallPromise] = useState(() => apiCall());
  return (
    <Suspense fallback={"loading..."}>
      <JokeItem
        apiCallPromise={apiCallPromise}
        onRefreshClick={() => setApiCallPromise(apiCall())}
      />
    </Suspense>
  );
}

const apiCall = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ value: "helo" });
    }, 1000);
  });
};

const JokeItem = ({ apiCallPromise, onRefreshClick }) => {
  const joke = use(apiCallPromise);

  return (
    <div className="bg-blue-50 shadow-md p-4 my-6 rounded-lg">
      <h2 className="text-xl font-bold">{joke.value}</h2>
      <button onClick={onRefreshClick}>Refresh</button>
    </div>
  );
};