Debounce triggering multiple times in react

Question

I am struggling with what's suppose to be a simple debounce. But somehow instead of waiting and triggering once, it waits but triggers all the events one by one until the last one.

It's part of the react component. Here is the code :

import debounce from "lodash.debounce";
(...)

export default () => {
    const { filter, updateFilter } = useContext(AppContext);
    const [searchString, setSearchString] = useState(filter.searchString);

    const changeFilter = value => {
        console.log(value);
    };

    const changeFilterDebounced = debounce(changeFilter, 3000, true);

    const handleChange = e => {
        let { value } = e.target;
        setSearchString(value);
        changeFilterDebounced(value);
};
(...)

So if I type something like "abc" in my input that gets the

onChange={handleChange}

it waits a bit (the three seconds) and then will show three successive console.log with values "a", "ab", "abc". My expectation was for it to trigger only once with "abc". I am wondering where I am missing something. Tried to add true as the third argument but didn't change anything and I am also creating a specific function with the debounce not to create a new debounce each time as mentioned in other posts.

Thanks for your help.

How you have implemented the debounce function? – Mohammed Ashfaq Dec 03 '19 at 07:08 — Mohammed Ashfaq, Dec 03 '19 at 07:08
@MohammedAshfaq imported from lodash, (edited question) – Ivo Dec 03 '19 at 07:10 — Ivo, Dec 03 '19 at 07:10

score 19 · Accepted Answer · answered Dec 03 '19 at 07:22

The debounced function is getting recreated on every re-render.

You will need to wrap it in useCallback which will hold the same reference unless one of the variables inside the dependencies array change

const changeFilterDebounced = useCallback(
  debounce(value => console.log(value), 3000, true),
  []
)

score 3 · Answer 2 · answered Dec 03 '19 at 07:25

As you're using a functional component, all the functions defined will be reinitialized on each render, ie creating a new debounced function each time.

The possible workaround is to use useMemo and useCallback along with it so that the reference of function does not change on each render.

const changeFilterDebounced = debounce(changeFilter, 3000, true);

can be changed into:

const changeFilterDebounced = useMemo(() => debounce(changeFilter, 3000, true), [handleChange]);

and wrap handleChange with useCallback like:

const handleChange = useCallback(e => {
    let { value } = e.target;
    setSearchString(value);
    changeFilterDebounced(value);
}, []);

The empty dependency array as the second argument of useCallback was provided, so that its ref will be the same till the component unmounts.

Hope this helps.

Thanks for this reply too. Is there any advantage to combine useMemo with useCallback compared to the solution proposed by Asaf Aviv ? — Ivo, Dec 03 '19 at 07:35
@Ivo `useMemo` is used to cache expensive calculations, it used mainly to store data of any type that is not a function. this will add unnecessary overhead since you only need to save a function. both `useMemo` and `useCallback` still create the function on every re-render but gets garbage collected. — Asaf Aviv, Dec 03 '19 at 08:04

score 2 · Answer 3 · edited Sep 03 '21 at 13:18

Debounce is weird for that it bases on closure which may leads many strange things. Closure means the function keeps the variables alive even if it returns. So it seems like there is an instance after invoked.

As in your case, you typed three chars. And everytime you typed, the setState got called which leads that react renders your component and produces a debounced function. Every debounced function works separately. That is why you got three logs.

Try using useCallback to make sure that you always use the first debounced function.

Debounce triggering multiple times in react

3 Answers3