Perbedaan Promise, async/await, dan Penggunaan Promise.all dalam React

Sebagai seseorang yang sedang belajar React dan JavaScript secara mendalam, aku sering menemui kode asynchronous, terutama saat fetch data dari API. Di awal, aku mengenal Promise lebih dulu karena sering muncul di dokumentasi dan tutorial. Tapi seiring waktu, aku mulai terbiasa menggunakan async/await karena penulisannya terasa lebih sederhana dan rapi.

Meskipun secara fungsi keduanya sama, aku sadar pentingnya menjaga konsistensi dalam gaya penulisan kode. Dari sinilah aku mulai mendalami perbedaan antara Promise dan async/await, serta menemukan bahwa Promise.all bisa sangat membantu ketika ingin menjalankan beberapa request secara paralel.

Perbandingan Promise vs async/await

Contoh Penggunaan di React

Dengan Promise:

useEffect(() => {
  fetch("https://jsonplaceholder.typicode.com/users/1")
    .then((res) => res.json())
    .then((data) => setUser(data))
    .catch((err) => console.error(err));
}, []);

Dengan async/await:

useEffect(() => {
  const fetchUser = async () => {
    try {
      const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
      const data = await res.json();
      setUser(data);
    } catch (err) {
      console.error(err);
    }
  };
  fetchUser();
}, []);

Penggunaan Promise.all di React

Ketika butuh mengambil 2 data atau banyak data sekaligus (secara paralel), Promise.all adalah solusi yang sangat efisien. Contoh gabungan async/await dan Promise.all:

useEffect(() => {
  const fetchData = async () => {
    try {
      const [userRes, postRes] = await Promise.all([
        fetch("https://jsonplaceholder.typicode.com/users/1"),
        fetch("https://jsonplaceholder.typicode.com/posts/1"),
      ]);
 
      const user = await userRes.json();
      const post = await postRes.json();
 
      setData({ user, post });
    } catch (error) {
      console.error("Gagal fetch:", error);
    }
  };
 
  fetchData();
}, []);

🧠 Penutup: Konsistensi adalah Kunci

Walaupun Promise dan async/await hanya berbeda di cara penulisan, konsistensi gaya coding sangat penting untuk menjaga kualitas dan keterbacaan kode. Jika kamu sudah memakai async/await, tetaplah menggunakan pendekatan tersebut agar kode tetap seragam dan lebih mudah dikelola.

Gunakan Promise.all saat ingin mengambil banyak data secara paralel dan tidak bergantung satu sama lain.