In this article, you will learn what is debounce function and how to perform debounce in Reactjs? how debounce can be helpful in Reactjs?

2. How to perform debouncing in Reactjs?
• Debouncing in Javascript is an effective method for enhancing
browser performance. It is time-consuming computations so that
they could invoke or degrade frequently. The programming practice
Debouncing based on Debouncing is a suitable option for maintaining
the time-consuming tasks. Usually, the process is a convenient option
for limiting the rate of invoked functions during the progression.

3. What is the Debounce Function?
The Debounce or debounce() function In Reactjs mainly forces the
function to halt while running it. Debounce() function is built for
limiting or reducing the number of times they are called.
Availability of the best react js development services would be a
suitable option for efficiently improving the stable results. This is also
an appropriate option for limiting the number of times the functions
are called.

4. How Can Debounce In Reactjs Be Helpful?
Debounce In Reactjs is quite a helpful process mainly assured in giving
you the practical benefits to the excellence. For example, when there is
an auto-complete or type-ahead, it needs to be shown along with the
dropdown options.
These are mainly enabled on firing the APIs for each keystroke.
Typically, the debounce function is one of the practical options for
quickly triggering the API, and it also allows the entire time delayed
attributes. These are suitable options for rapidly adding the user when
typing.
When you are giving a delay of 300ms, the user takes some time or
higher to type the next word or letter. It is quite a practical option for
triggering the API, and the process mainly reduces the number of API
calls and makes it quite significant.

5. Creating React Application And Installing Module:
• Step 1: Create a React application using the following command:
npx create-react-app react-debouncing
• Step 2:After creating your project folder, i.e. react-
debouncing, move to it using the following command:
cd react-debouncing
• Step 3: After creating the ReactJS application, Install the required
module using the following command:
npm install lodash

6. Callback Without Debouncing:
• The process is mainly added with the significant aspects called
<FilterList> accepts. The main reason is that they have a
comprehensive list of names that includes 200 records.
• It especially has the component and the input where the user types
their required query and the name so that they would be
automatically filtered on the query. <FilterList> component is listed
below:

7. import React, { useState, useCallback } from "react";
import debounce from "lodash.debounce";
export function FilterList({ names }) {
const [query, setQuery] = useState("");
let filteredNames = names;
if (query !== "") {
filteredNames = names.filter((name) => {
return name.toLowerCase().includes(query.toLowerCase());
});
}
const changeHandler = (event) => {
setQuery(event.target.value);
};

8. const debouncedChangeHandler = useCallback(debounce(changeHandler, 300), []);
return (
<div>
<input
onChange={debouncedChangeHandler}
type="text"
placeholder="Type a query..."
/>
{filteredNames.map((name) => (
<div key={name}>{name}</div>
))}
<div>{filteredNames.length === 0 && query !== "" && "No matches..."}</div>
</div>
);
}

9. What Is The Debouncing Application?
• Debouncing has mainly been implemented in which the search works
along with the user. These are typed primarily in the search box for
getting the right results. It primarily comes from the server, so clicking
the server API stops to the greatest extent.
• These are mainly enabled with the frequent server API changes so
that they degrade the server performance. Various applications based
on debouncing are available such as content-loading WebPages such
as Face, Twitter, and many more. These applications mainly allow
users to keep the content and scroll it down continuously.
• Usually, when the scrolled event is clicked frequently, it could create
an impact. The main reason is that they contain more images and
videos. Scroll events make use of debouncing. For example, when you
are looking for debounce handleOnChange

10. function debounce(fn, delay) {
var timer = null;
return function() {
var context = this,
args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, args);
}, delay);
};
}
var SearchBox = React.createClass({
render: function() {
return <input type="search" name="p" onChange={this.handleOnChange} />;
},
handleOnChange: function(event) {
// make ajax call
}
});

11. Codes for Debouncing Callback:
• For Debouncing the changeHandler function in Reactjs, it is
convenient to use lodash. Debounce package. These are mainly
enabled with various libraries that allow debouncing action.
import debounce from 'lodash.debounce';
const debouncedCallback = debounce(callback, waitTime);

12. Under the procedure, the debounce() function would accept the
callback argument function. These are suitable options for returning
the debounced version for its functions. The debounce function is
mainly called as the debouncedCallback would automatically get
invoked multiple times.
These are burst and assured with invoking the callback on varied
waitTime. Upon analyzing the process, it is quite a significant way for
debouncing fits perfectly. These are suitable methods for filtering in
<FilterList>: let’s debounce changeHandler. The process would mainly
result in a 300ms wait time.

13. import { useState, useCallback } from 'react';
import debounce from 'lodash.debounce';
export function FilterList({ names }) {
const [query, setQuery] = useState("");
let filteredNames = names;
if (query !== "") {
filteredNames = names.filter((name) => {
return name.toLowerCase().includes(query.toLowerCase());
});
}

14. const changeHandler = event => {
setQuery(event.target.value);
};
const debouncedChangeHandler = useCallback(
debounce(changeHandler, 300)
, []);
return (
<div>
<input
onChange={debouncedChangeHandler}
type="text"
placeholder="Type a query..."
/>
{filteredNames.map(name => <div key={name}>{name}</div>)}
</div>
);
}

15. Creating Project With Backend Code:
Building the auto-complete project with the secure API on keystroke is
helpful. These mainly increase the custom Debounce function, and it is
quite a convenient option for using the inbuilt Debounce function,
assuring in giving better usage.
Creating the short backend program using node assures you the better
string. Get the best react js development services suitable for
Performing the Debounce in Reactjs and save more time.

16. const express =require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.use((req,res,next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', '*');
next();
});
const Words = mongoose.model("words", new mongoose.Schema({
words: [String]
}));
app.get("/api/words", async (req , res) => {
let qw = req.query.queryWord;
let queryWord = qw.replace(/^"|"$/g, '');
const words = await Words.find({})
let wordsArray = words[0].words;
let filteredArray = wordsArray.filter(val => {
return val.indexOf(queryWord.toLowerCase()) > -1
});

17. res.send(filteredArray);
});
app.post("/api/words", async (req , res) => {
const newWordArray = new Words(req.body);
const savedArray = await newWordArray.save();
res.send(savedArray);
});
const PORT = process.env.port || 5000;
mongoose.connect("mongodb://localhost/word-list-db", {useNewUrlParser: true, useUnifiedTopology:
true})
.then(() => {
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
})
.catch((err) => console.log(err));
mongoose.set('useFindAndModify', false);

18. React Code:
• debounceFunction takes 2 different arguments. These mainly enable
major functions on calling when they get delayed such as the
getDropDown function. These involve a delay amount for calling and
assures in getting a quick function.
• Let’s see the code in next slide.

19. import React , {useCallback, useState} from 'react';
import './App.css';
import axios from 'axios';
function App() {
const [options, showOptions] = useState(false);
const [searchString, setSearchString] = useState("");
const [dropDownOptions, setDropdownOptions] = useState([]);
const onInputClickHandler = () => {
showOptions(true);
}
const getDropDown = (val) => {
axios.get("http://localhost:5000/api/words?queryWord=" + val).then(res => {
setDropdownOptions(res.data);
});
}
const onInputChangeHandler = (e) => {
const nextValue = e.target.value
setSearchString(nextValue);
getDropDown(nextValue);
}
const setOptionsAsInputHandler = (val) => {
showOptions(false);
setSearchString(val);
}

20. return (
<div className="App">
<header className="App-header">
<h1>Debounce In React</h1>
<div className="Autocomplete">
<input className="Input" placeholder="Type Something..." onClick={onInputClickHandler}
onChange={onInputChangeHandler} value={searchString}/>
<div className="Options">
{options ?
dropDownOptions.map(value => {
return <div key={value} onClick={() => setOptionsAsInputHandler(value)}>{value}</div>
})
: null}
</div>
</div>
</header>
</div>
);
}
export default App;

21. Conclusion:
• The best way to create debounced functions is by using the
useMemo() hook. These are also suitable options for handling all the
happening events. Properly setting guarantees with completely
refreshing with debounced closure. When the debounced event
handler accesses, it is essential to set dependencies arguments using
useMemo(…, dependencies).
• Thank you for reading our article from start to end. Hope you enjoyed
reading and got some value from our article. Also, let us know your
thoughts. We are continuously improving our content and always
trying to provide you a best.
• If your business lacks professionals, hire a mobile app developer
company for app development solution and overcome the technical
things.
• Keep Learning!!! Keep Sharing!!!

22. Content Source:
https://bosctechlabs.com/perform-debouncing-in-react/
Thank You
For
Reading.