Избегавајте преоптерећење сервера непотребним позивима функције претраге и оптимизујте перформансе апликације користећи ову технику.

У Реацт-у, када имплементира функцију претраживања, онЦханге руковалац позива функцију претраге сваки пут када корисник унесе у поље за унос. Овај приступ може изазвати проблеме са перформансама, посебно ако упућујете АПИ позиве или постављате упите бази података. Чести позиви функцији претраге могу преоптеретити веб сервер, што може довести до кварова или корисничког интерфејса који не реагује. Одбијање решава овај проблем.

Шта је дебоунцинг?

Обично имплементирате функцију претраживања у Реацт-у тако што ћете позвати функцију руковања онЦханге при сваком притиску на тастер као што је приказано у наставку:

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

Док ово функционише, позив бацкенд-у за ажурирање резултата претраге при сваком притиску тастера може бити скуп. На пример, ако сте тражили „вебдев“, апликација би послала захтев бацкенд-у са вредностима „в“, „ве“, „веб“ и тако даље.

Одбијање је техника која функционише тако што одлаже извршење функције док не прође период кашњења. Функција дебоунце детектује сваки пут када корисник куца и спречава позив руковаоцу претраге док кашњење не истекне. Ако корисник настави да куца у периоду одлагања, тајмер се ресетује и Реацт поново позива функцију за ново одлагање. Овај процес се наставља све док корисник не заустави куцање.

Чекањем да корисници паузирају куцање, одбијање осигурава да ваша апликација прави само неопходне захтеве за претрагу и на тај начин смањује оптерећење сервера.

Како да одбијете претрагу у Реацт-у

Постоји неколико библиотека које можете користити за имплементацију дебоунце. Такође можете изабрати да га сами имплементирате од нуле користећи ЈаваСцрипт сетТимеоут и цлеарТимеоут функције.

Овај чланак користи функцију дебоунце фром библиотека лодаш.

Под претпоставком да имате спреман Реацт пројекат, креирајте нову компоненту под називом Претрага. Ако немате радни пројекат, креирајте Реацт апликацију користећи креирајте Реацт услужни програм за апликацију.

У Претрага компоненту, копирајте следећи код да бисте креирали поље за унос за претрагу које позива функцију руковаоца при сваком притиску тастера.

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

Да дебоунце тхе хандлеСеарцх функцију, проследите је на дебоунце функција од лодасх.

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

У дебоунце функцију, прослеђујете функцију коју желите да одложите, тј хандлеСеарцх функцију и време кашњења у милисекундама, тј. 500 мс.

Док би горњи код требало да одложи позив на хандлеСеарцх захтева док корисник не паузира куцање, не ради у Реацт-у. Објаснићемо зашто у следећем одељку.

Дебоунцинг и Рендерс

Ова апликација користи контролисани унос. То значи да вредност стања контролише вредност улаза; сваки пут када корисник унесе у поље за претрагу Реацт ажурира стање.

У Реацт-у, када се вредност стања промени, Реацт поново приказује компоненту и извршава све функције унутар ње.

У горњој компоненти претраге, када се компонента поново рендерује, Реацт извршава функцију дебоунце. Функција креира нови тајмер који прати кашњење, а стари тајмер седи у меморији. Када време истекне, покреће функцију претраге. То значи да се функција претраживања никада не поништава, већ касни 500 мс. Овај циклус се понавља на сваком рендеру— функција креира нови тајмер, стари тајмер истиче и онда позива функцију претраге

Да би функција дебоунце функционисала, морате је позвати само једном. То можете да урадите тако што ћете позвати функцију дебоунце ван компоненте или би користећи технику памћења. На овај начин, чак и ако се компонента поново прикаже, Реацт је неће поново извршити.

Дефинисање функције дебоунце изван компоненте претраге

Померите дебоунце функција изван Претрага компонента као што је приказано у наставку:

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


const debouncedSearch = debounce(handleSearch, 500);

Сада, у Претрага компонента, позив дебоунцедСеарцх и проследите термин за претрагу.

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

Функција претраге ће бити позвана тек након истека периода одлагања.

Меморирање функције Дебоунце

Мемоизинг се односи на кеширање резултата функције и њихово поновно коришћење када позовете функцију са истим аргументима.

Да запамтите дебоунце функцију, користите усеМемо кука.

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

Имајте на уму да сте такође умотали хандлеСеарцх функција у а усеЦаллбацк хоок да би се осигурало да га Реацт позива само једном. Без усеЦаллбацк кука, Реацт би извршио хандлеСеарцх функцију са сваким поновним приказивањем чинећи зависности од усеМемо кука промена која би заузврат позвала дебоунце функција.

Сада ће Реацт позвати само дебоунце функција ако је хандлеСеарцх функције или се мења време кашњења.

Оптимизујте претрагу помоћу Дебоунце

Понекад успоравање може бити боље за перформансе. Када се бавите задацима претраге, посебно са скупим позивима базе података или АПИ-ја, најбоље је користити функцију дебоунце. Ова функција уводи одлагање пре слања позадинских захтева.

Помаже у смањењу броја захтева упућених серверу, јер шаље захтев тек након што је кашњење протекло и корисник паузирао куцање. На овај начин, сервер се не преоптерећује са превише захтева, а перформансе остају ефикасне.