Debounce in ReactJS

Question

I am trying to implement debounce in my search input in React. The below code is causing the delay but its firing the same number of times.

Example - If I type abcd in less than 2 seconds(delay) my debounced value should be abcd instead I am getting console with all values-

Debounced: a 
Debounced: ab 
Debounced: abc 
Debounced: abcd 

What I am assuming, if I type abcd then it should make a single call instead of 4 in this case.

Code -

import { useState } from 'react';

function debounce(cb, delay) {
  let timeoutId;
  return function (...args) {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }

    timeoutId = setTimeout(() => {
      cb(...args);
    }, delay);
  };
}

export default function App() {
  const [searchVal, setSearchVal] = useState('');
  const [debounceVal, setDebounceVal] = useState('');

  const debouncedChange = debounce((inputValue) => {
    console.log('Debounced:', inputValue);
    setDebounceVal(inputValue);
  }, 2000);

  const handleChange = (e) => {
    const inputValue = e.target.value;
    setSearchVal(inputValue);
    debouncedChange(inputValue);
  };

  return (
    <div className="App">
      <h1>Debounce</h1>

      <div className="container">
        <div className="search-input">
          <input type="text" value={searchVal} onChange={handleChange} />
        </div>

        <div className="search-data">{debounceVal}</div>
      </div>
    </div>
  );
}

Let me know if I am doing something wrong here with the code or my understanding around debounce.

Answer 1

I would recommend using useEffect hook to listen to any changes and do a clean-up as well. Here's a working DEMO

function useDebounce(cb, delay) {
  const [debounceValue, setDebounceValue] = useState(cb);
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebounceValue(cb);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [cb, delay]);
  return debounceValue;
}

Answer 2

The issue is that every time the App component is re-rendered, the debounce function is recreated, and thus timeoutId has lost its previous scope. That's why, in your example, clearTimeout is never executed, as every change in the input field sets state which causes the App to re-render.

You could use a custom hook that's almost identical to your original function, but leverages the ability of a ref to retain the value of .current between renders:

import { useRef } from "react";

function useDebounce (cb, delay) {
  const timeoutId = useRef();
  
  return function (...args) {
    if (timeoutId.current) { // This check is not strictly necessary
      clearTimeout(timeoutId.current);
    }
    timeoutId.current = setTimeout(
      () => cb(...args), delay
    )
  }
}

Then your debounced function should be the return value of calling the useDebounced hook inside the App component:

const debouncedChange = useDebounce((inputValue) => {
    console.log('Debounced:', inputValue);
    setDebounceVal(inputValue);
  }, 2000);