const fetchPromiseTodo = () => {
  return new Promise((resolve, reject) => {
    const url = "https://jsonplaceholder.typicode.com/todos/1";
 
    fetch(url)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
      })
      .then((data) => {
        resolve(data);
      })
      .catch((error) => {
        reject(error);
      });
  });
};

const fetchTodoAsync = async () => {
  const url = "https://jsonplaceholder.typicode.com/todos/1";
 
  try {
    const response = await fetch(url);
 
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
 
    const data = await response.json();
    return data;
  } catch (error) {
    throw error;
  }
};

import React from "react";
import { useEffect, useState } from "react";
 
export default function Test() {
  const [todo, setTodo] = useState(null);
 
  useEffect(() => {
    fetchPromiseTodo()
      .then((data) => {
        setTodo(data);
      })
      .catch((error) => {
        console.log("failed to fetch data", error);
      });
  }, []);
 
  console.log(todo);
 
  return <div></div>;
}

import React from "react";
import { useEffect, useState } from "react";
 
export default function Test() {
  const [todo, setTodo] = useState(null);
 
  useEffect(() => {
    const fetch = async () => {
      const res = await fetchTodoAsync();
      setTodo(res);
    };
 
    fetch();
  }, []);
 
  console.log(todo);
 
  return <div></div>;
}