React - Menjaga UI Tetap Responsif dengan useTransition

Halo teman-teman! 👋

Pernahkah kalian membuat fitur pencarian yang terasa… berat? Kalian mengetik di input, dan selama sepersekian detik, seluruh halaman nge-freeze saat memfilter daftar item yang sangat banyak.

Itu sangat mengganggu pengguna. Kita ingin aplikasi kita terasa cepat dan responsif, bukan?

Masalah: Blocking Updates 🛑

Dulu, update di React itu sifatnya “semua atau tidak sama sekali”. Jika kalian menyuruh React untuk mengupdate state, React akan menghentikan hal lain sampai update tersebut selesai.

Bayangkan skenario ini:

// Komponen yang lambat
const HeavyList = ({ query }) => {
  // Anggap ini memfilter 10.000 item
  const items = filterItems(query);

  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
};

Jika filterItems butuh 500ms untuk berjalan, input field kalian akan macet selama 500ms setiap kali kalian mengetik satu huruf. 😱

Solusinya: useTransition ✅

React 18 memperkenalkan useTransition. Hook ini memungkinkan kalian untuk menandai beberapa update sebagai “tidak mendesak” (non-urgent).

Ini memberitahu React: “Hei, update input segera (mendesak), tapi santai saja saat mengupdate list (tidak mendesak).”

Begini cara menggunakannya:

import { useState, useTransition } from 'react';

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

  const handleChange = (e) => {
    // 1. Update input segera (Mendesak)
    setInput(e.target.value);

    // 2. Update query di dalam transition (Tidak mendesak)
    startTransition(() => {
      setQuery(e.target.value);
    });
  };

  return (
    <div>
      <input value={input} onChange={handleChange} />

      {isPending && <p>Sedang memuat...</p>}

      <HeavyList query={query} />
    </div>
  );
};

Bagaimana Cara Kerjanya?

1. Urgent Update: setInput(e.target.value) terjadi secara instan. Pengguna melihat apa yang mereka ketik segera.
2. Transition: startTransition menjadwalkan update setQuery.
3. Interruptible: Jika pengguna mengetik karakter lain saat HeavyList masih dirender, React akan menjeda rendering tersebut, menangani input baru, dan kemudian memulai ulang rendering dengan nilai baru.

Ini membuat UI tetap responsif! 🚀

Kapan Harus Menggunakannya? 🤔

Kalian tidak perlu menggunakan useTransition untuk semuanya.

• Gunakan untuk: Filter berat, sorting list besar, atau berpindah antar tab yang kompleks.
• Hindari untuk: Update state sederhana seperti toggle modal atau input form kecil.

Kesimpulan

Hook useTransition adalah alat yang ampuh di fitur concurrent React 18. Ini membantu kalian memprioritaskan interaksi pengguna di atas komputasi berat.

Cobalah di proyek kalian berikutnya agar aplikasi terasa lebih mulus!

Happy Coding! 🚀