React51 / 78

Pola Fetch-on-Render & Masalahnya

Melakukan fetch di useEffect secara bersarang di komponen anak menyebabkan Waterfall Request di mana request berjalan bertahap satu per satu.

👀 Contoh dulu

// Parent fetch -> render -> Child fetch -> render (Waterfall Delay)

Hasilnya: Aplikasi terasa lambat karena komponen menunggu urutan request.

💡 Solusinya adalah mengunduh data secara paralel atau memanfaatkan Server Components.

📝 Sekarang giliranmu

Tuliskan sebuah array literal [usersPromise, postsPromise] lalu bungkus ke dalam pemanggilan Promise.all() agar kedua permintaan tersebut bisa berjalan secara paralel tanpa waterfall.

Preview