У React під час реалізації функції пошуку обробник onChange викликає функцію пошуку кожного разу, коли користувач вводить текст у полі введення. Такий підхід може спричинити проблеми з продуктивністю, особливо під час викликів API або запитів до бази даних. Часті виклики функції пошуку можуть перевантажити веб-сервер, що призведе до збоїв або невідповідності інтерфейсу користувача. Debouncing вирішує цю проблему.
Що таке Debouncing?
Як правило, ви реалізуєте функцію пошуку в React, викликаючи функцію обробки onChange під час кожного натискання клавіші, як показано нижче:
import { useState } from "react";export default function Search() {
const [searchTerm, setSearchTerm] = useState("");
const handleSearch = () => {
console.log("Search for:", searchTerm);
};
const handleChange = (e) => {
setSearchTerm(e.target.value);
handleSearch();
};
return (
<input
onChange={handleChange}
value={searchTerm}
placeholder="Search here..."
/>
);
}
Хоча це працює, виклик серверної частини для оновлення результатів пошуку при кожному натисканні клавіші може коштувати дорого. Наприклад, якщо ви шукаєте «webdev», програма надішле запит до серверної частини зі значеннями «w», «we», «web» тощо.
Усунення стрибків — це техніка, яка працює шляхом затримки виконання функції, доки не мине період затримки. Функція debounce виявляє щоразу, коли користувач вводить текст, і запобігає виклику обробника пошуку, доки не мине затримка. Якщо користувач продовжує вводити текст протягом періоду затримки, таймер скидається, і React знову викликає функцію для нової затримки. Цей процес триває, доки користувач не призупинить введення тексту.
Чекаючи, доки користувачі призупинять введення тексту, усунення відмов гарантує, що ваша програма виконує лише необхідні пошукові запити, тим самим зменшуючи навантаження на сервер.
Як усунути пошук у React
Існує кілька бібліотек, які можна використовувати для реалізації захисту від дребезгу. Ви також можете реалізувати це самостійно з нуля, використовуючи функції JavaScript setTimeout і clearTimeout.
У цій статті використовується функція debounce з бібліотеки lodash.
Припускаючи, що у вас є готовий проект React, створіть новий компонент під назвою Search. Якщо у вас немає робочого проекту, створіть додаток React за допомогою утиліти create React app.
У файл компонента пошуку скопіюйте наведений нижче код, щоб створити поле введення пошуку, яке викликає функцію обробки під час кожного натискання клавіші.
import { useState } from "react";export default function Search() {
const [searchTerm, setSearchTerm] = useState("");
const handleSearch = () => {
console.log("Search for:", searchTerm);
};
const handleChange = (e) => {
setSearchTerm(e.target.value);
handleSearch();
};
return (
<input
onChange={handleChange}
value={searchTerm}
placeholder="Search here..."
/>
);
}
Щоб усунути дребезг функції handleSearch, передайте його функції debounce з lodash.
import debounce from "lodash.debounce";
import { useState } from "react";export default function Search() {
const [searchTerm, setSearchTerm] = useState("");const handleSearch = () => {
console.log("Search for:", searchTerm);
};
const debouncedSearch = debounce(handleSearch, 1000);const handleChange = (e) => {
setSearchTerm(e.target.value);
debouncedSearch();
};return (
<input
onChange={handleChange}
value={searchTerm}
placeholder="Search here..."
/>
);
}
У функції debounce ви передаєте функцію, яку хочете затримати, тобто функцію handleSearch, і час затримки в мілісекундах, тобто 500 мс.
Хоча наведений вище код має затримувати виклик запиту handleSearch, доки користувач не призупинить введення, він не працює в React. У наступному розділі ми пояснимо, чому.
Усунення стрибків і повторне рендеринг
Ця програма використовує контрольований вхід. Це означає, що значення стану контролює значення вхідних даних; кожного разу, коли користувач вводить у полі пошуку React оновлює стан.
У React, коли змінюється значення стану, React повторно рендерить компонент і виконує всі функції всередині нього.
У наведеному вище компоненті пошуку, коли компонент повторно рендериться, React виконує функцію debounce. Функція створює новий таймер, який відстежує затримку, а старий таймер зберігається в пам’яті. Після закінчення часу він запускає функцію пошуку. Це означає, що функція пошуку ніколи не припиняється, вона затримується на 500 мс. Цей цикл повторюється під час кожного візуалізації — функція створює новий таймер, старий таймер закінчується, а потім викликає функцію пошуку
Щоб функція debounce працювала, її потрібно викликати лише один раз. Ви можете зробити це, викликавши функцію debounce поза компонентом або використовуючи техніку запам’ятовування. Таким чином, навіть якщо компонент повторно рендериться, React не виконає його знову.
Визначення функції Debounce поза компонентом пошуку
Перемістіть функцію усунення стрибків за межі компонента пошуку, як показано нижче:
import debounce from "lodash.debounce"const handleSearch = (searchTerm) => {
console.log("Search for:", searchTerm);
};const debouncedSearch = debounce(handleSearch, 500);
Тепер у компоненті пошуку викличте debouncedSearch і введіть пошуковий термін.
export default function Search() {
const [searchTerm, setSearchTerm] = useState(""); const handleChange = (e) => {
setSearchTerm(e.target.value);
debouncedSearch(searchTerm);
};
return (
<input
onChange={handleChange}
value={searchTerm}
placeholder="Search here..."
/>
);
}
Функція пошуку буде викликана лише після закінчення періоду затримки.
Згадування функції Debounce
Згадування — це кешування результатів функції та їх повторне використання під час виклику функції з тими самими аргументами.
Щоб запам’ятати функцію debounce, використовуйте хук useMemo.
import debounce from "lodash.debounce";
import { useCallback, useMemo, useState } from "react";export default function Search() {
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);
debouncedSearch(searchTerm);
};return (
<input
onChange={handleChange}
value={searchTerm}
placeholder="Search here..."
/>
);
}
Зауважте, що ви також загорнули функцію handleSearch у хук useCallback, щоб переконатися, що React викликає її лише один раз. Без хука useCallback React виконував би функцію handleSearch з кожним повторним рендером, роблячи залежності від хука useMemo, що змінює, що, у свою чергу, викликало б функцію debounce.
Тепер React викличе функцію debounce, лише якщо змінюється функція handleSearch або час затримки.
Оптимізуйте пошук за допомогою Debounce
Іноді уповільнення може бути кращим для ефективності. Під час виконання пошукових завдань, особливо з дорогими викликами бази даних або API, використання функції усунення дребезгу – це шлях. Ця функція вводить затримку перед надсиланням серверних запитів.
Це допомагає зменшити кількість запитів, зроблених на сервер, оскільки він надсилає запит лише після того, як мине затримка та користувач призупинить введення. Таким чином сервер не перевантажується надто великою кількістю запитів, а продуктивність залишається ефективною.
