React'te Debouncing ile Arama Performansı Nasıl Artırılır?

React'ta, arama işlevini uygularken, onChange işleyicisi, kullanıcı giriş kutusuna her yazı yazdığında arama işlevini çağırır. Bu yaklaşım, özellikle API çağrıları yaparken veya veritabanını sorgularken performans sorunlarına neden olabilir. Arama fonksiyonuna sık sık yapılan çağrılar web sunucusunun aşırı yüklenmesine neden olarak çökmelere veya kullanıcı arayüzünün yanıt vermemesine neden olabilir. Debounce bu sorunu çözer.

Geri Dönme Nedir?

Tipik olarak, aşağıda gösterildiği gibi her tuş vuruşunda bir onChange işleyici işlevini çağırarak React'te arama işlevini uygularsınız:

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..."
 />
 );
}

Bu işe yarasa da, her tuşa basıldığında arama sonuçlarını güncellemek için arka uca yapılan çağrı pahalı olabilir. Örneğin, "webdev" araması yapıyorsanız uygulama arka uca "w", "we", "web" vb. değerleri içeren bir istek gönderir.

Geri döndürme, bir işlevin yürütülmesini bir gecikme süresi dolana kadar geciktirerek çalışan bir tekniktir. Geri dönme işlevi, kullanıcının her yazışını algılar ve gecikme geçene kadar arama işleyicisine çağrı yapılmasını engeller. Kullanıcı gecikme süresi içinde yazmaya devam ederse zamanlayıcı sıfırlanır ve React, yeni gecikme için işlevi tekrar çağırır. Bu işlem, kullanıcı yazmayı durdurana kadar devam eder.

Kullanıcıların yazmayı duraklatmalarını bekleyerek geri dönme, uygulamanızın yalnızca gerekli arama isteklerini yapmasını sağlar ve böylece sunucu yükünü azaltır.

React'ta Aramayı Geri Döndürme

Geri dönmeyi uygulamak için kullanabileceğiniz çeşitli kütüphaneler vardır. Ayrıca JavaScript'i kullanarak sıfırdan kendiniz uygulamayı da seçebilirsiniz. setTimeout Ve clearTimeout işlevler.

Bu makalede, geri dönme işlevi kullanılmaktadır. lodash kütüphanesi.

Hazır bir React projeniz olduğunu varsayarak, adında yeni bir bileşen oluşturun. Aramak. Çalışan bir projeniz yoksa, kullanarak bir React uygulaması oluşturun. React uygulama yardımcı programını oluştur.

İçinde Aramak bileşen dosyasında, her tuş vuruşunda bir işleyici işlevi çağıran bir arama giriş kutusu oluşturmak için aşağıdaki kodu kopyalayın.

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..."
 />
 );
}

Geri çekilmek için koluArama işlevine aktarın geri dönmek lodash'tan işlev.

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..."
 />
 );
}

İçinde geri dönmek işlevi, geciktirmek istediğiniz işlevi, yani koluArama işlevi ve milisaniye cinsinden gecikme süresi, yani 500ms.

Yukarıdaki kodun çağrıyı geciktirmesi gerekirken koluArama Kullanıcı yazmayı duraklatana kadar istekte bulunulması React'ta çalışmaz. Nedenini aşağıdaki bölümde açıklayacağız.

Geri Döndürme ve Yeniden Oluşturma

Bu uygulama kontrollü bir giriş kullanır. Bu, durum değerinin girişin değerini kontrol ettiği anlamına gelir; Bir kullanıcı arama alanına her yazı yazdığında React durumu günceller.

React'ta bir durum değeri değiştiğinde React, bileşeni yeniden işler ve içindeki tüm işlevleri yürütür.

Yukarıdaki arama bileşeninde, bileşen yeniden oluşturulduğunda React, geri dönme işlevini yürütür. İşlev, gecikmeyi takip eden yeni bir zamanlayıcı oluşturur ve eski zamanlayıcı hafızada kalır. Süresi dolduğunda arama fonksiyonunu başlatır. Bu, arama fonksiyonunun hiçbir zaman iptal edilmediği, 500 ms geciktiği anlamına gelir. Bu döngü her işlemede tekrarlanır; işlev yeni bir zamanlayıcı oluşturur, eski zamanlayıcının süresi dolar ve ardından arama işlevini çağırır.

Geri dönme fonksiyonunun çalışması için onu yalnızca bir kez çağırmanız gerekir. Bunu, bileşenin dışından geri dönme işlevini çağırarak veya not alma tekniğini kullanarak. Bu şekilde bileşen yeniden oluşturulsa bile React onu tekrar çalıştırmayacaktır.

Arama Bileşeni Dışında Geri Dönme Fonksiyonunun Tanımlanması

Taşı geri dönmek dışında işlev görür Aramak aşağıda gösterildiği gibi bileşen:

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

Şimdi, Aramak bileşen, çağrı geri çevrilmişArama ve arama terimini girin.

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..."
 />
 );
}

Arama fonksiyonu ancak gecikme süresi dolduktan sonra çağrılacaktır.

Geri Dönme Fonksiyonunun Hafızaya Alınması

Not alma, bir işlevin sonuçlarının önbelleğe alınması ve işlevi aynı argümanlarla çağırdığınızda bunların yeniden kullanılması anlamına gelir.

Ezberlemek için geri dönmek işlevini kullanın Kullanım Notu kanca.

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..."
 />
 );
}

Ayrıca paketlediğinizi de unutmayın. koluArama bir işlevde geri aramayı kullanın React'ın onu yalnızca bir kez çağırmasını sağlamak için kancayı kullanın. olmadan geri aramayı kullanın hook, React bunu yürütür koluArama bağımlılıklarını yapan her yeniden oluşturma işleminde işlev görür Kullanım Notu kanca değişimi, bu da geri dönmek işlev.

Artık React yalnızca geri dönmek eğer işlev koluArama işlevi veya gecikme süresi değişir.

Aramayı Geri Döndürme ile Optimize Edin

Bazen yavaşlamak performans açısından daha iyi olabilir. Arama görevlerini yerine getirirken, özellikle de pahalı veri tabanı veya API çağrıları söz konusu olduğunda, geri dönme işlevinin kullanılması gidilecek yoldur. Bu işlev, arka uç isteklerini göndermeden önce bir gecikme sağlar.

İsteği yalnızca gecikme geçtikten ve kullanıcı yazmayı duraklattıktan sonra gönderdiğinden, sunucuya yapılan istek sayısının azaltılmasına yardımcı olur. Bu şekilde sunucu çok fazla istek nedeniyle aşırı yüklenmez ve performans verimli kalır.