DEV Community

Cover image for React Custom Hooks (useDebounce)
sundarbadagala
sundarbadagala

Posted on

1

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;
};
Enter fullscreen mode Exit fullscreen mode

HELPER

export function helperDebounce(fn, delay) {
    delay = delay || 400
    let timer;
    return function () {
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn(...args);
        }, delay);
    };
}
Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

OUTPUT

debounce hook output

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series