React 18: Memahami Automatic Batching

Halo para Code Wizards! 🧙‍♂️

Ingat masa-masa kelam di mana kalau saya update dua state sekaligus, React bakal me-render ulang komponen dua kali? Itu rasanya capek banget. Bayangin kamu pesan makanan di warkop: pesan kopi, pelayannya lari ke dapur. Terus kamu panggil lagi pesan gorengan, dia lari lagi ke dapur. Capek kan?

Nah, React 18 punya fitur keren namanya Automatic Batching. Anggap saja ini pelayan yang lebih cerdas. Dia bakal nunggu kamu selesai pesan semuanya, baru lari ke dapur sekali jalan.

Yuk, kita bedah cara kerjanya!

Masalah: Kebanyakan Re-render

Di React 17 ke bawah, React cuma melakukan “batching” (pengelompokan) update state kalau kejadiannya ada di dalam browser event (kayak onClick). Tapi kalau saya update state di dalam setTimeout atau fetch, React bakal panik dan me-render ulang untuk setiap update state.

Ini contoh klasik “zaman kegelapan”:

// Perilaku React 17 di dalam timeout
setTimeout(() => {
  setCount(c => c + 1); // Re-render ke-1
  setFlag(f => !f);     // Re-render ke-2
}, 1000);

Kalau komponennya berat, UI jadi terasa laggy. Gak asik banget.

Solusi: Automatic Batching

React 18 itu lebih pinter. Dia bilang, “Eh, saya liat kamu update banyak state nih. Saya tunggu bentar deh, kumpulin semua, baru saya update DOM-nya sekali aja.”

Gak peduli dari mana pemicunya:

• Event handlers? Di-batch.
• Promises? Di-batch.
• Timeouts? Di-batch juga.

Coba lihat kode ini:

import { useState } from 'react';

function BatchingExample() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    // React 18 bakal batching ini secara otomatis!
    // Gak masalah mau di dalam promise atau timeout.
    setTimeout(() => {
      setCount(c => c + 1);
      setFlag(f => !f);
      // React cuma bakal re-render SEKALI aja di akhir!
    }, 1000);
  }

  console.log("Render!"); // Ini cuma muncul sekali per klik di React 18

  return (
    <div>
      <button onClick={handleClick}>Klik Saya</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

Ini adalah kemenangan besar buat performa aplikasi kita. Kamu gak perlu ubah kode apa-apa; cukup upgrade ke React 18, dan boom! Fitur ini langsung aktif.

Cara “Opt-out” (Kalau Kepepet Banget)

Kadang-kadang, walau jarang banget, mungkin kamu pengen maksa re-render langsung setelah update state. Mungkin kamu perlu baca nilai DOM saat itu juga (meskipun biasanya useEffect lebih tepat buat kasus gitu).

Kamu bisa pakai flushSync dari react-dom buat bilang ke React: “Kerjain SEKARANG.”

import { flushSync } from 'react-dom';

function handleClick() {
  flushSync(() => {
    setCount(c => c + 1);
  });
  // React udah update DOM di sini

  flushSync(() => {
    setFlag(f => !f);
  });
  // React update DOM lagi di sini
}

Tapi serius deh, jangan pakai ini kecuali kamu punya alasan yang sangat spesifik. Biarkan React bekerja dengan caranya sendiri.

Kesimpulan

Automatic Batching adalah salah satu fitur yang bikin saya makin cinta sama React. Re-render jadi lebih sedikit, performa lebih oke, dan kita gak perlu pusing mikirin optimasi manual.

Jadi, silakan update state sesuka hati! React yang bakal urus sisanya.

Happy coding! 🚀