INTRO
Hello World! 👋
Today's custom hook is useDebounce. In this post we will discuss what is debounce method, how to develop through custom hooks and javascript.
USAGE
Debounce is one of the important concept in JavaScript. Debounce function helps to wait certain amount of time before running again. It is very helpful to reduce the frequent calls (renders) of the function. So that the program efficient will increase.
For example If we want to call api with search option, every time we call onchage method then the api will also call so it causes many api calls. It effects on application performance.
To overcome this problem We have to limit the state update every time we state change, Debounce method will helps to reduce this state update limit.
There are two ways to write the debounce method, one is by the react hooks and second one is by using pure javascript.
CODE
HOOK
import { useState, useEffect } from 'react'
export const useDebounce = (value, delay) => {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, milliSeconds]);
return debouncedValue;
};
HELPER
export function helperDebounce(fn, delay) {
delay = delay || 400
let timer;
return function () {
let args = arguments;
clearTimeout(timer);
timer = setTimeout(() => {
fn(...args);
}, delay);
};
}
USE CASE
HOOK USE CASE
import React, { useEffect, useState } from "react";
import { useDebounce } from "../../hooks/useDebounce";
function App() {
const [value, setValue] = useState("");
const debonceValue = useDebounce(value, 500);
useEffect(() => {
console.log(debonceValue);
}, [debonceValue]);
return (
<>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="with hook debounce"
/>
{debonceValue}
</>
);
}
export default App;
HELPER USE CASE
import React, { useState } from "react";
import { helperDebounce } from "../../helpers/helperDebounce";
function App() {
const [value, setValue] = useState("");
const handleChange = helperDebounce((e) => {
setValue(e.target.value);
}, 500);
console.log(value);
return (
<>
<input
type="text"
onChange={(e) => handleChange(e)}
placeholder="with helper debounce"
/>{" "}
{value}
</>
);
}
export default App;
OUTPUT
Top comments (0)