I recently built an anime app that fetches details about animes from an external API. The project had an input field where you could type in the name of an anime to search for. The text entered in the input field was then used to query the API for animes matching the input. The input field was to use “instant search” mechanism. This meant that users were not required to hit enter or press a button for the search to occur. To prevent making a call to the API on every keystroke, I had to debounce the queries made to the API. What is Debounce According to a definition, debounce is " " dictionary To remove the small ripple of current that forms when a mechanical switch is pushed in an electrical circuit and makes a series of short contacts. In programming, is a practice used to ensure that time-consuming tasks do not fire so often, that it stalls the performance of the web page. This is done to limit the rate at which a function gets invoked. debouncing Getting Started We would be using to bootstrap our project. Create-React-App We would be using , as additional dependencies. We would be getting the anime details from Apiary Material-UI Axios Jikan Project Structure This is our initial application setup. The issue that arises from this is that the request to the API is made on every keystroke entered by the user. To debounce the input and ensure it only occurs after a stipulated time, for example, every 250ms, we would be using the function. The global method sets a timer which executes a function or specified piece of code once the timer expires. setTimeout setTimeout() To prevent our setTimeout function from being redefined on every render, we would use to create a reference that would be persisted across every render. We would also ensure to clear our timeout to prevent memory leaks. useRef We have added our API call inside a timeout callback. Our request to the API would now occur after 250ms. On every keystroke made by the user, we clear the timer and extend it by another 250ms. If the input field is empty, we return from the function and do not make a call to the API. The call to the API now only happens 250ms after the user has stopped typing, instead of on every keystroke. And that's it, we are done. We have been able to create an instant search input field that delays by 250ms after the user finishes typing before making an API call. The full source code can be found . here

Create Incredible Shapes Using the CSS Clip-path Property

Read My Stories

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - HackerNoon Contributor of the Year - Api

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Css3

Too Long; Didn't Read

Make resilience your competitive advantage

How to Create an Instant Search Input with Debounce in React.js

How to Create an Instant Search Input with Debounce in React.js

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Create Incredible Shapes Using the CSS Clip-path Property

10 Best Anime Websites to Stream & Download [Free + Paid]

24 Best Live Action Anime Movies Ranked by Review Scores

4 Intellectual Properties that Deserve a Proper Video Game Adaptation

Anime Expo 2023 in LA: ZAN Movie Revealed, A Match Made in Otaku Heaven

Create Incredible Shapes Using the CSS Clip-path Property

10 Best Anime Websites to Stream & Download [Free + Paid]

24 Best Live Action Anime Movies Ranked by Review Scores

4 Intellectual Properties that Deserve a Proper Video Game Adaptation

Anime Expo 2023 in LA: ZAN Movie Revealed, A Match Made in Otaku Heaven

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps