React useActionState: Menerapkan Debouncing untuk Pembatasan Laju Aksi yang Optimal

Dalam aplikasi web modern, menangani interaksi pengguna secara efisien adalah hal yang terpenting. Aksi seperti pengiriman formulir, kueri pencarian, dan pembaruan data sering kali memicu operasi di sisi server. Namun, panggilan yang berlebihan ke server, terutama yang dipicu secara berurutan dengan cepat, dapat menyebabkan kemacetan performa dan pengalaman pengguna yang menurun. Di sinilah debouncing berperan, dan hook useActionState dari React menawarkan solusi yang kuat dan elegan.

Apa itu Debouncing?

Debouncing adalah praktik pemrograman yang digunakan untuk memastikan bahwa tugas yang memakan waktu tidak terlalu sering dijalankan, dengan menunda eksekusi sebuah fungsi hingga setelah periode non-aktif tertentu. Bayangkan seperti ini: Anda sedang mencari produk di situs e-commerce. Tanpa debouncing, setiap ketukan tombol di bilah pencarian akan memicu permintaan baru ke server untuk mengambil hasil pencarian. Hal ini dapat membebani server dan memberikan pengalaman yang tersendat dan tidak responsif bagi pengguna. Dengan debouncing, permintaan pencarian hanya dikirim setelah pengguna berhenti mengetik untuk periode singkat (misalnya, 300 milidetik).

Mengapa Menggunakan useActionState untuk Debouncing?

useActionState, yang diperkenalkan di React 18, menyediakan mekanisme untuk mengelola pembaruan state asinkron yang dihasilkan dari aksi, terutama di dalam React Server Components. Ini sangat berguna dengan aksi server karena memungkinkan Anda mengelola state pemuatan (loading) dan eror secara langsung di dalam komponen Anda. Ketika digabungkan dengan teknik debouncing, useActionState menawarkan cara yang bersih dan beperforma tinggi untuk mengelola interaksi server yang dipicu oleh input pengguna. Sebelum `useActionState`, mengimplementasikan fungsionalitas semacam ini sering kali melibatkan pengelolaan state secara manual dengan `useState` dan `useEffect`, yang menghasilkan kode yang lebih bertele-tele dan berpotensi rawan eror.

Menerapkan Debouncing dengan useActionState: Panduan Langkah-demi-Langkah

Mari kita jelajahi contoh praktis penerapan debouncing menggunakan useActionState. Kita akan mempertimbangkan skenario di mana pengguna mengetik ke dalam bidang input, dan kita ingin memperbarui basis data di sisi server dengan teks yang dimasukkan, tetapi hanya setelah penundaan singkat.

Langkah 1: Menyiapkan Komponen Dasar

Pertama, kita akan membuat komponen fungsional sederhana dengan sebuah bidang input:

            import React, { useState, useCallback } from 'react';
import { useActionState } from 'react-dom/server';

async function updateDatabase(prevState: any, formData: FormData) {
  // Mensimulasikan pembaruan basis data
  const text = formData.get('text') as string;
  await new Promise(resolve => setTimeout(resolve, 500)); // Mensimulasikan latensi jaringan
  return { success: true, message: `Updated with: ${text}` };
}

function MyComponent() {
  const [debouncedText, setDebouncedText] = useState('');
  const [state, dispatch] = useActionState(updateDatabase, {success: false, message: ""});

  const handleChange = (event: React.ChangeEvent) => {
    const newText = event.target.value;
    setDebouncedText(newText);
  };

  return (
    <form action={dispatch}>
      <input type="text" name="text" value={debouncedText} onChange={handleChange} />
      <button type="submit">Update</button>
      <p>{state.message}</p>
    </form>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Dalam kode ini:

• Kita mengimpor hook yang diperlukan: useState, useCallback, dan useActionState.
• Kita mendefinisikan fungsi asinkron updateDatabase yang mensimulasikan pembaruan di sisi server. Fungsi ini mengambil state sebelumnya dan data formulir sebagai argumen.
• useActionState diinisialisasi dengan fungsi updateDatabase dan objek state awal.
• Fungsi handleChange memperbarui state lokal debouncedText dengan nilai input.

Langkah 2: Menerapkan Logika Debounce

Sekarang, kita akan memperkenalkan logika debouncing. Kita akan menggunakan fungsi setTimeout dan clearTimeout untuk menunda panggilan ke fungsi dispatch yang dikembalikan oleh `useActionState`.

            import React, { useState, useRef, useCallback } from 'react';
import { useActionState } from 'react-dom/server';

async function updateDatabase(prevState: any, formData: FormData) {
  // Mensimulasikan pembaruan basis data
  const text = formData.get('text') as string;
  await new Promise(resolve => setTimeout(resolve, 500)); // Mensimulasikan latensi jaringan
  return { success: true, message: `Updated with: ${text}` };
}

function MyComponent() {
  const [debouncedText, setDebouncedText] = useState('');
  const [state, dispatch] = useActionState(updateDatabase, {success: false, message: ""});
  const timeoutRef = useRef(null);

  const handleChange = (event: React.ChangeEvent) => {
    const newText = event.target.value;
    setDebouncedText(newText);

    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    timeoutRef.current = window.setTimeout(() => {
      const formData = new FormData();
      formData.append('text', newText);
      dispatch(formData);
    }, 300);
  };

  return (
    <div>
      <input type="text" value={debouncedText} onChange={handleChange} />
      <p>{state.message}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Berikut adalah perubahannya:

• Kita menambahkan hook useRef bernama timeoutRef untuk menyimpan ID timeout. Ini memungkinkan kita untuk membersihkan timeout jika pengguna mengetik lagi sebelum penundaan berakhir.
• Di dalam handleChange:
• Kita membersihkan timeout yang ada menggunakan clearTimeout jika timeoutRef.current memiliki nilai.
• Kita mengatur timeout baru menggunakan setTimeout. Timeout ini akan mengeksekusi fungsi dispatch (dengan data formulir yang diperbarui) setelah 300 milidetik non-aktif.
• Kita memindahkan panggilan dispatch keluar dari formulir dan ke dalam fungsi yang di-debounce. Kita sekarang menggunakan elemen input standar daripada formulir, dan memicu aksi server secara terprogram.

Langkah 3: Mengoptimalkan Performa dan Kebocoran Memori

Implementasi sebelumnya sudah fungsional, tetapi dapat dioptimalkan lebih lanjut untuk mencegah potensi kebocoran memori. Jika komponen dilepas (unmount) saat timeout masih tertunda, callback timeout akan tetap dieksekusi, yang berpotensi menyebabkan eror atau perilaku yang tidak terduga. Kita dapat mencegah ini dengan membersihkan timeout di hook useEffect saat komponen dilepas:

            import React, { useState, useRef, useCallback, useEffect } from 'react';
import { useActionState } from 'react-dom/server';

async function updateDatabase(prevState: any, formData: FormData) {
  // Mensimulasikan pembaruan basis data
  const text = formData.get('text') as string;
  await new Promise(resolve => setTimeout(resolve, 500)); // Mensimulasikan latensi jaringan
  return { success: true, message: `Updated with: ${text}` };
}

function MyComponent() {
  const [debouncedText, setDebouncedText] = useState('');
  const [state, dispatch] = useActionState(updateDatabase, {success: false, message: ""});
  const timeoutRef = useRef(null);

  const handleChange = (event: React.ChangeEvent) => {
    const newText = event.target.value;
    setDebouncedText(newText);

    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    timeoutRef.current = window.setTimeout(() => {
      const formData = new FormData();
      formData.append('text', newText);
      dispatch(formData);
    }, 300);
  };

  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []);

  return (
    <div>
      <input type="text" value={debouncedText} onChange={handleChange} />
      <p>{state.message}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Kita menambahkan hook useEffect dengan array dependensi kosong. Ini memastikan bahwa efek hanya berjalan saat komponen dipasang (mount) dan dilepas (unmount). Di dalam fungsi cleanup efek (yang dikembalikan oleh efek), kita membersihkan timeout jika ada. Ini mencegah callback timeout dieksekusi setelah komponen dilepas.

Alternatif: Menggunakan Pustaka Debounce

Meskipun implementasi di atas menunjukkan konsep inti dari debouncing, menggunakan pustaka debounce khusus dapat menyederhanakan kode dan mengurangi risiko eror. Pustaka seperti lodash.debounce menyediakan implementasi debouncing yang kuat dan telah teruji dengan baik.

Berikut cara Anda dapat menggunakan lodash.debounce dengan useActionState:

            import React, { useState, useCallback, useEffect } from 'react';
import { useActionState } from 'react-dom/server';
import debounce from 'lodash.debounce';

async function updateDatabase(prevState: any, formData: FormData) {
  // Mensimulasikan pembaruan basis data
  const text = formData.get('text') as string;
  await new Promise(resolve => setTimeout(resolve, 500)); // Mensimulasikan latensi jaringan
  return { success: true, message: `Updated with: ${text}` };
}

function MyComponent() {
  const [debouncedText, setDebouncedText] = useState('');
  const [state, dispatch] = useActionState(updateDatabase, {success: false, message: ""});

  const debouncedDispatch = useCallback(debounce((text: string) => {
    const formData = new FormData();
    formData.append('text', text);
    dispatch(formData);
  }, 300), [dispatch]);

  const handleChange = (event: React.ChangeEvent) => {
    const newText = event.target.value;
    setDebouncedText(newText);
    debouncedDispatch(newText);
  };

  return (
    <div>
      <input type="text" value={debouncedText} onChange={handleChange} />
      <p>{state.message}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Dalam contoh ini:

• Kita mengimpor fungsi debounce dari lodash.debounce.
• Kita membuat versi debounced dari fungsi dispatch menggunakan useCallback dan debounce. Hook useCallback memastikan bahwa fungsi debounced hanya dibuat sekali, dan array dependensi menyertakan dispatch untuk memastikan bahwa fungsi debounced diperbarui jika fungsi dispatch berubah.
• Di dalam fungsi handleChange, kita cukup memanggil fungsi debouncedDispatch dengan teks baru.

Pertimbangan Global dan Praktik Terbaik

Saat menerapkan debouncing, terutama dalam aplikasi dengan audiens global, pertimbangkan hal berikut:

• Latensi Jaringan: Latensi jaringan dapat bervariasi secara signifikan tergantung pada lokasi pengguna dan kondisi jaringan. Penundaan debounce yang berfungsi baik untuk pengguna di satu wilayah mungkin terlalu pendek atau terlalu lama untuk pengguna di wilayah lain. Pertimbangkan untuk mengizinkan pengguna menyesuaikan penundaan debounce atau secara dinamis menyesuaikan penundaan berdasarkan kondisi jaringan. Ini sangat penting untuk aplikasi yang digunakan di wilayah dengan akses internet yang tidak dapat diandalkan, seperti sebagian Afrika atau Asia Tenggara.
• Input Method Editor (IME): Pengguna di banyak negara Asia menggunakan IME untuk memasukkan teks. Editor ini sering kali memerlukan beberapa ketukan tombol untuk menyusun satu karakter. Jika penundaan debounce terlalu singkat, hal itu dapat mengganggu proses IME, yang menyebabkan pengalaman pengguna yang membuat frustrasi. Pertimbangkan untuk meningkatkan penundaan debounce untuk pengguna yang menggunakan IME, atau gunakan event listener yang lebih sesuai untuk komposisi IME.
• Aksesibilitas: Debouncing berpotensi memengaruhi aksesibilitas, terutama bagi pengguna dengan gangguan motorik. Pastikan penundaan debounce tidak terlalu lama, dan sediakan cara alternatif bagi pengguna untuk memicu aksi jika diperlukan. Misalnya, Anda bisa menyediakan tombol kirim yang dapat diklik pengguna untuk memicu aksi secara manual.
• Beban Server: Debouncing membantu mengurangi beban server, tetapi tetap penting untuk mengoptimalkan kode di sisi server agar dapat menangani permintaan secara efisien. Gunakan caching, pengindeksan basis data, dan teknik optimisasi performa lainnya untuk meminimalkan beban pada server.
• Penanganan Eror: Terapkan penanganan eror yang kuat untuk menangani eror apa pun yang terjadi selama proses pembaruan di sisi server dengan baik. Tampilkan pesan eror yang informatif kepada pengguna, dan berikan opsi untuk mencoba kembali aksi tersebut.
• Umpan Balik Pengguna: Berikan umpan balik visual yang jelas kepada pengguna untuk menunjukkan bahwa input mereka sedang diproses. Ini bisa berupa spinner pemuatan, bilah kemajuan, atau pesan sederhana seperti "Memperbarui...". Tanpa umpan balik yang jelas, pengguna bisa menjadi bingung atau frustrasi, terutama jika penundaan debounce relatif lama.
• Lokalisasi: Pastikan semua teks dan pesan dilokalkan dengan benar untuk berbagai bahasa dan wilayah. Ini termasuk pesan eror, indikator pemuatan, dan teks lain yang ditampilkan kepada pengguna.

Contoh: Debouncing pada Bilah Pencarian

Mari kita pertimbangkan contoh yang lebih konkret: sebuah bilah pencarian dalam aplikasi e-commerce. Kita ingin melakukan debounce pada kueri pencarian untuk menghindari pengiriman terlalu banyak permintaan ke server saat pengguna mengetik.

            import React, { useState, useCallback, useEffect } from 'react';
import { useActionState } from 'react-dom/server';
import debounce from 'lodash.debounce';

async function searchProducts(prevState: any, formData: FormData) {
  // Mensimulasikan pencarian produk
  const query = formData.get('query') as string;
  await new Promise(resolve => setTimeout(resolve, 500)); // Mensimulasikan latensi jaringan
  // Dalam aplikasi nyata, Anda akan mengambil hasil pencarian dari basis data atau API di sini
  const results = [`Product A matching "${query}"`, `Product B matching "${query}"`];
  return { success: true, message: `Search results for: ${query}`, results: results };
}

function SearchBar() {
  const [searchQuery, setSearchQuery] = useState('');
  const [state, dispatch] = useActionState(searchProducts, {success: false, message: "", results: []});
  const [searchResults, setSearchResults] = useState([]);

  const debouncedSearch = useCallback(debounce((query: string) => {
    const formData = new FormData();
    formData.append('query', query);
    dispatch(formData);
  }, 300), [dispatch]);

  const handleChange = (event: React.ChangeEvent) => {
    const newQuery = event.target.value;
    setSearchQuery(newQuery);
    debouncedSearch(newQuery);
  };

  useEffect(() => {
    if(state.success){
      setSearchResults(state.results);
    }
  }, [state]);

  return (
    <div>
      <input type="text" placeholder="Search for products..." value={searchQuery} onChange={handleChange} />
      <p>{state.message}</p>
      <ul>
        {searchResults.map((result, index) => (
          <li key={index}>{result}</li>
        ))}
      </ul>
    </div>
  );
}

export default SearchBar;

            

              
                Copy
              
            
          

Contoh ini menunjukkan cara melakukan debounce pada kueri pencarian menggunakan lodash.debounce dan useActionState. Fungsi searchProducts mensimulasikan pencarian produk, dan komponen SearchBar menampilkan hasil pencarian. Dalam aplikasi dunia nyata, fungsi searchProducts akan mengambil hasil pencarian dari API backend.

Lebih dari Debouncing Dasar: Teknik Lanjutan

Meskipun contoh-contoh di atas menunjukkan debouncing dasar, ada teknik yang lebih canggih yang dapat digunakan untuk lebih mengoptimalkan performa dan pengalaman pengguna:

• Debouncing Leading Edge: Dengan debouncing standar, fungsi dieksekusi setelah penundaan. Dengan debouncing leading edge, fungsi dieksekusi di awal penundaan, dan panggilan berikutnya selama penundaan diabaikan. Ini bisa berguna untuk skenario di mana Anda ingin memberikan umpan balik langsung kepada pengguna.
• Debouncing Trailing Edge: Ini adalah teknik debouncing standar, di mana fungsi dieksekusi setelah penundaan.
• Throttling: Throttling mirip dengan debouncing, tetapi alih-alih menunda eksekusi fungsi hingga setelah periode non-aktif, throttling membatasi laju di mana fungsi dapat dipanggil. Misalnya, Anda bisa melakukan throttle pada sebuah fungsi agar dipanggil paling banyak sekali setiap 100 milidetik.
• Debouncing Adaptif: Debouncing adaptif secara dinamis menyesuaikan penundaan debounce berdasarkan perilaku pengguna atau kondisi jaringan. Misalnya, Anda bisa mengurangi penundaan debounce jika pengguna mengetik sangat lambat, atau meningkatkan penundaan jika latensi jaringan tinggi.

Kesimpulan

Debouncing adalah teknik penting untuk mengoptimalkan performa dan pengalaman pengguna aplikasi web interaktif. Hook useActionState dari React menyediakan cara yang kuat dan elegan untuk menerapkan debouncing, terutama dalam hubungannya dengan React Server Components dan aksi server. Dengan memahami prinsip-prinsip debouncing dan kemampuan useActionState, pengembang dapat membangun aplikasi yang responsif, efisien, dan ramah pengguna yang dapat berskala global. Ingatlah untuk mempertimbangkan faktor-faktor seperti latensi jaringan, penggunaan IME, dan aksesibilitas saat menerapkan debouncing dalam aplikasi dengan audiens global. Pilih teknik debouncing yang tepat (leading edge, trailing edge, atau adaptif) berdasarkan persyaratan spesifik aplikasi Anda. Manfaatkan pustaka seperti lodash.debounce untuk menyederhanakan implementasi dan mengurangi risiko eror. Dengan mengikuti panduan ini, Anda dapat memastikan bahwa aplikasi Anda memberikan pengalaman yang lancar dan menyenangkan bagi pengguna di seluruh dunia.