React Custom Hooks (useDebounce)

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

GIF