React: What is React data fetching patterns?

1function User({ id }) {
2  const [user, setUser] = useState(null);
3  useEffect(() => { fetchUser(id).then(setUser); }, [id]);
4  if (!user) return <Spinner />;
5  return <div>{user.name}</div>;
6}

1const { data, isLoading } = useQuery({
2  queryKey: ["user", id],
3  queryFn: () => fetchUser(id),
4});

1async function UserProfile({ id }) {
2  const user = await db.user.findOne(id);
3  return <div>{user.name}</div>;
4}

1function UserProfile({ id }) {
2  const user = use(fetchUser(id));
3  return <div>{user.name}</div>;
4}