Hari ke-5 Belajar React: Batching dan Functional Updates

Saya pikir memanggil state setter berkali-kali akan menyebabkan render berkali-kali.

Saya salah.

React lebih pintar dari itu. React menggunakan proses yang disebut Automatic Batching.

Alih-alih melakukan render setelah setiap pembaruan, React mengelompokkannya. React mengumpulkan semua pembaruan dan melakukan satu kali render saja. Ini menghemat performa.

Inilah yang saya pelajari hari ini.

Proses Batching Saat Anda memanggil beberapa fungsi state, React mengikuti alur ini:

  • Terjadi beberapa pembaruan state.
  • React melakukan batching pada pembaruan tersebut.
  • React melakukan satu kali render.
  • React menerapkan perubahan ke UI.

Masalah dengan Pembaruan Standar Saya mencoba kode ini: setCount(count + 1); setCount(count + 1); setCount(count + 1);

Saya mengira count akan berubah dari 0 ke 3. Ternyata berubah dari 0 ke 1.

Ini terjadi karena setCount(count + 1) tidak berarti "tambahkan count." Melainkan "atur count ke nilai spesifik ini."

Jika count adalah 0, setiap baris memberi tahu React untuk mengatur count ke 1. React melakukan batching pada instruksi ini dan melihat bahwa instruksi terakhir adalah mengatur count ke 1.

Solusinya: Functional Updates Untuk memperbaikinya, Anda harus menggunakan functional update. Ini menggunakan state terbaru yang tersedia dalam update queue.

Cara yang benar: setCount((prev) => prev + 1);

Saat Anda menggunakan pola ini, React memberikan nilai terbaru ke setiap pembaruan.

  • Pembaruan pertama: 0 + 1 = 1
  • Pembaruan kedua: 1 + 1 = 2
  • Pembaruan ketiga: 2 + 1 = 3

Sekarang counter tersebut benar-benar mencapai 3.

Kesalahan Umum Saya pernah menulis: setCount((prev) => { prev + 1 });

Counter-nya menjadi undefined. Saat Anda menggunakan kurung kurawal dalam arrow function, Anda harus menggunakan kata kunci return. Gunakan ini sebagai gantinya: setCount((prev) => prev + 1);

Poin Penting:

  • React melakukan batching pada beberapa pembaruan state untuk meningkatkan kecepatan.
  • Pemanggilan setState tidak selalu memicu render secara langsung.
  • Pembaruan standar menggunakan nilai dari siklus render saat ini.
  • Functional updates menggunakan state terbaru dari update queue.
  • React menggunakan Update Queue internal untuk mengelola perubahan ini.

Source: https://dev.to/bismay-exe/day-5-of-learning-react-understanding-automatic-batching-functional-updates-397k