React 18: Menguasai useTransition untuk UI yang Lebih Mulus

Halo, Rekan Coding! 👋

Hari ini kita bakal bahas menu spesial dari React 18. Pernah gak sih pas kamu lagi ngetik di kotak pencarian, eh aplikasinya nge-freeze sebentar? Rasanya kayak nyetir motor tapi remnya macet—bahaya dan bikin emosi!

Hal itu terjadi karena React, secara default, menganggap semua update itu penting dan mendesak. React mencoba memperbarui nilai input sekaligus memfilter ribuan data di saat yang bersamaan.

Nah, kenalan yuk sama useTransition. Hook ini ibaratnya bilang ke React: “Woy, tolong update inputnya sekarang juga, tapi filter datanya santai aja, belakangan gapapa.”

Yuk, kita bedah bareng-bareng! 🔧

Masalah: Update yang Bikin Macet 🚫

Bayangkan kamu punya daftar berisi 10.000 item. Setiap kali kamu ngetik satu huruf, React harus memfilter daftar itu dan me-render ulang semuanya.

Tanpa useTransition, user ngetik ‘a’, layar freeze sampai filter selesai. User ngetik ‘b’, freeze lagi. Rasanya berat banget.

Solusi: useTransition Penyelamat Kita 🦸‍♂️

useTransition memberikan kita dua hal:

1. isPending: Boolean yang ngasih tau kalau transisi (proses berat) masih berjalan.
2. startTransition: Fungsi buat nandain state update sebagai “tidak mendesak” (non-urgent).

Gini cara pakainya:

import { useState, useTransition } from "react";

// Ceritanya ini operasi berat
const filterItems = (query) => {
  const items = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);
  return items.filter(item => item.includes(query));
};

const SearchComponent = () => {
  const [query, setQuery] = useState("");
  const [list, setList] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    const value = e.target.value;

    // 1. Update Mendesak: Update input field langsung
    setQuery(value);

    // 2. Update Santai: Filter list kalau ada waktu luang
    startTransition(() => {
      const filtered = filterItems(value);
      setList(filtered);
    });
  };

  return (
    <div className="p-4">
      <input
        type="text"
        value={query}
        onChange={handleChange}
        className="border p-2 rounded"
        placeholder="Cari sesuatu..."
      />

      {isPending && <p className="text-gray-500">Lagi memproses...</p>}

      <ul className="mt-4">
        {list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default SearchComponent;

Cara Kerjanya ⚙️

1. Update Mendesak: setQuery(value) terjadi instan. User langsung lihat apa yang mereka ketik. Gak pake lag.
2. Transisi: Di dalam startTransition, kita hitung filter list dan set list state. React tau kalau proses ini boleh di-interupsi.
3. Feedback: Selagi React sibuk ngurusin list di background, isPending jadi true. Kita bisa tampilin spinner atau pesan kayak “Lagi memproses…“.

Kalau user ngetik huruf lain sebelum filter yang pertama selesai, React bakal buang kerjaan lama dan mulai lagi dengan huruf baru. UI tetap responsif!

Kapan Harus Pakai Ini? 🤔

Jangan bungkus semua state update pake startTransition. Pakai cuma kalau:

• Nge-render list yang guede banget (kayak contoh kita).
• Kalkulasi matematika yang berat.
• Update UI yang kompleks (misal ganti tab yang isinya grafik berat).

Jangan pakai buat:

• Input biasa atau form kecil.
• Animasi (mending pakai CSS atau library animasi).

Kesimpulan

useTransition itu ibarat punya asisten dapur. Kamu urus pesanan yang harus keluar cepat (ngetik), sementara asisten kamu nyiapin bahan-bahan berat (filter data) di belakang. Dapur (aplikasi) kamu jadi tetap jalan lancar walau lagi rush hour.

Cobain deh di komponen kamu yang terasa berat!

Happy Coding! 🚀