CODEWITHSUNDEEP
javascriptreactjslodashdebouncing
Ivo
Ivo

Reputation: 2510

Debounce triggering multiple times in react

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.

Upvotes: 7

Views: 7326

Answers (3)

Singhi John
Singhi John

Reputation: 347

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.

Upvotes: 2

Vishnu
Vishnu

Reputation: 1701

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.

Upvotes: 4

Asaf Aviv
Asaf Aviv

Reputation: 11760

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),
  []
)

Upvotes: 24

Related Questions