Cara Meningkatkan Kinerja Pencarian di React Dengan Debouncing

Di React, saat mengimplementasikan fungsi pencarian, handler onChange memanggil fungsi pencarian setiap kali pengguna mengetik di dalam kotak input. Pendekatan ini dapat menyebabkan masalah kinerja, terutama saat melakukan panggilan API atau menanyakan database. Panggilan yang sering dilakukan ke fungsi pencarian dapat membebani server web, menyebabkan crash atau UI tidak responsif. Debouncing memecahkan masalah ini.

Apa itu Debouncing?

Biasanya, Anda mengimplementasikan fungsi pencarian di React dengan memanggil fungsi handler onChange pada setiap penekanan tombol seperti yang ditunjukkan di bawah ini:

import { useState } from"react";
exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");
const handleSearch = () => {
console.log("Search for:", searchTerm);
 };
const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 handleSearch();
 };





instagram viewer
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

Meskipun ini berhasil, panggilan ke backend untuk memperbarui hasil pencarian setiap kali tombol ditekan bisa menjadi mahal. Misalnya, jika Anda mencari “webdev”, aplikasi akan mengirimkan permintaan ke backend dengan nilai “w”, “we”, “web”, dan seterusnya.

Debouncing adalah teknik yang bekerja dengan menunda eksekusi suatu fungsi hingga periode penundaan berlalu. Fungsi debounce mendeteksi setiap kali pengguna mengetik dan mencegah panggilan ke pengendali pencarian hingga penundaan berlalu. Jika pengguna terus mengetik dalam periode penundaan, pengatur waktu akan diatur ulang dan React memanggil fungsi tersebut lagi untuk penundaan baru. Proses ini berlanjut hingga pengguna berhenti mengetik.

Dengan menunggu pengguna berhenti mengetik, debouncing memastikan aplikasi Anda hanya membuat permintaan pencarian yang diperlukan sehingga mengurangi beban server.

Cara Melakukan Debounce Pencarian di React

Ada beberapa perpustakaan yang dapat Anda gunakan untuk mengimplementasikan debounce. Anda juga dapat memilih untuk menerapkannya sendiri dari awal menggunakan JavaScript setWaktu habis Dan batas waktu yang jelas fungsi.

Artikel ini menggunakan fungsi debounce dari perpustakaan lodash.

Dengan asumsi Anda telah menyiapkan proyek React, buatlah komponen baru bernama Mencari. Jika Anda tidak memiliki proyek yang berfungsi, buatlah aplikasi React menggunakan buat utilitas aplikasi React.

Dalam Mencari file komponen, salin kode berikut untuk membuat kotak masukan pencarian yang memanggil fungsi pengendali pada setiap penekanan tombol.

import { useState } from"react";
exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");
const handleSearch = () => {
console.log("Search for:", searchTerm);
 };
const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 handleSearch();
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

Untuk melakukan debounce menangani Pencarian fungsi, teruskan ke menghilangkan bouncing fungsi dari lodash.

import debounce from"lodash.debounce";
import { useState } from"react";
exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");
const handleSearch = () => {
console.log("Search for:", searchTerm);
 };
const debouncedSearch = debounce(handleSearch, 1000);
const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 debouncedSearch();
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

Dalam menghilangkan bouncing fungsi, Anda meneruskan fungsi yang ingin Anda tunda yaitu menangani Pencarian fungsi, dan waktu tunda dalam milidetik yaitu 500 ms.

Sedangkan kode di atas seharusnya menunda panggilan ke menangani Pencarian meminta sampai pengguna berhenti mengetik, itu tidak berfungsi di React. Kami akan menjelaskan alasannya di bagian berikut.

Debouncing dan Render

Aplikasi ini menggunakan input terkontrol. Artinya, nilai negara mengontrol nilai masukan; setiap kali pengguna mengetik di kolom pencarian, React memperbarui statusnya.

Di React, ketika nilai status berubah, React merender komponen dan menjalankan semua fungsi di dalamnya.

Pada komponen pencarian di atas, ketika komponen dirender ulang, React menjalankan fungsi debounce. Fungsi ini membuat pengatur waktu baru yang melacak penundaan dan pengatur waktu lama disimpan di memori. Ketika waktunya habis, ia akan mengaktifkan fungsi pencarian. Ini berarti fungsi pencarian tidak pernah dibatalkan, melainkan tertunda 500 ms. Siklus ini berulang pada setiap render— fungsi ini membuat pengatur waktu baru, pengatur waktu lama akan habis masa berlakunya, lalu memanggil fungsi pencarian

Agar fungsi debounce berfungsi, Anda hanya perlu memanggilnya sekali. Anda dapat melakukan ini dengan memanggil fungsi debounce di luar komponen atau dengan menggunakan teknik memoisasi. Dengan cara ini, meskipun komponen dirender, React tidak akan mengeksekusinya lagi.

Mendefinisikan Fungsi Debounce Di Luar Komponen Pencarian

Memindahkan menghilangkan bouncing berfungsi di luar Mencari komponen seperti gambar di bawah ini:

import debounce from"lodash.debounce"
const handleSearch = (searchTerm) => {
console.log("Search for:", searchTerm);
};
const debouncedSearch = debounce(handleSearch, 500);

Sekarang, di Mencari komponen, panggilan di-debounceSearch dan lolos dalam istilah pencarian.

exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");
const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 debouncedSearch(searchTerm);
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

Fungsi pencarian hanya akan dipanggil setelah periode penundaan berlalu.

Mengingat Fungsi Debounce

Memo mengacu pada menyimpan hasil suatu fungsi dan menggunakannya kembali saat Anda memanggil fungsi dengan argumen yang sama.

Untuk mengingat menghilangkan bouncing fungsi, gunakan gunakanMemo kait.

import debounce from"lodash.debounce";
import { useCallback, useMemo, useState } from"react";
exportdefaultfunctionSearch() {
const [searchTerm, setSearchTerm] = useState("");
const handleSearch = useCallback((searchTerm) => {
console.log("Search for:", searchTerm);
 }, []);
const debouncedSearch = useMemo(() => {
return debounce(handleSearch, 500);
 }, [handleSearch]);
const handleChange = (e) => {
 setSearchTerm(e.target.value);
// Calls search function
 debouncedSearch(searchTerm);
 };
return (
 onChange={handleChange}
 value={searchTerm}
 placeholder="Search here..."
 />
 );
}

Perhatikan bahwa Anda juga telah membungkusnya menangani Pencarian berfungsi dalam a gunakan Panggilan Balik hook untuk memastikan React hanya memanggilnya sekali. Tanpa gunakan Panggilan Balik hook, React akan mengeksekusi menangani Pencarian berfungsi dengan setiap rendering ulang membuat ketergantungan gunakanMemo perubahan kait yang pada gilirannya akan memanggil menghilangkan bouncing fungsi.

Sekarang, React hanya akan memanggil menghilangkan bouncing berfungsi jika menangani Pencarian fungsi atau waktu tunda berubah.

Optimalkan Pencarian Dengan Debounce

Terkadang, memperlambat bisa lebih baik untuk performa. Saat menangani tugas pencarian, terutama dengan panggilan database atau API yang mahal, menggunakan fungsi debounce adalah cara yang tepat. Fungsi ini menimbulkan penundaan sebelum mengirim permintaan backend.

Ini membantu mengurangi jumlah permintaan yang dibuat ke server, karena server hanya mengirimkan permintaan setelah penundaan berlalu dan pengguna berhenti mengetik. Dengan cara ini, server tidak kelebihan beban dengan terlalu banyak permintaan, dan kinerja tetap efisien.