React Debounce Debouncing with React Hooks

Why not just:

export const debounce = (func, wait) => {
  let timeout;
  return function(...args) {
    const context = this;
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => {
      timeout = null;
      func.apply(context, args);
    }, wait);
  };
};

Now you can use this debouce in other hooks.

My aproach is this way:

import { useMemo, useState } from 'react'

/**
 * Debounce a function by time
 * @param {Function} func
 * @param {Number} delay
 */

export default function useDebounce(func, delay) {
    const [id, setId] = useState(null)

    return useMemo(
        (...args) => {
            if (id) {
                clearTimeout(id)
            } else {
                setId(
                    setTimeout(() => {
                        setId(null)
                        func(...args)
                    }, delay)
                )
            }
        },
        [func]
    )
}

whilst I like the idea of this, I think the UI and the API call should be far more decoupled, so instead I've went for:

// in the useDebounce file
import { useEffect } from 'react';
/**
 * @description for use in functions with side-effects but no return value
 * @export useDebouncedFunction
 */
export default function useDebouncedFunction(handler, watchedValue, delay) {
  useEffect(() => {
    const timeoutHandler = setTimeout(() => {
      handler();
    }, delay);
    return () => {
      clearTimeout(timeoutHandler);
    };
  }, [watchedValue, delay]);
}

// in the search file
  const [searchQuery, setSearchQuery] = React.useState('');

  const fetchX = async () => {
    await getX()
      .then((updatedStock: IStockResponse) => {
        setX(updated.data?? []);
      })
      .catch(err => {
        console.error(err);
      });
  };
  useDebouncedFunction(fetchStockVehicles, searchQuery, 1000);
  const handleSearch = (value: string) => {
    setSearchQuery(value ?? '');
  };

why dont we do this in the useEffect?

import React, { useState, useEffect } from "react";

const useDebounce = (data, delay) => {
  const [debouncedData, setDebouncedData] = useState(data);
 var timerID;
  useEffect(() => {

    if(timerID){
       clearTimeout(timerID)
    } 
    console.log("debounce executed");
     timerID = setTimeout(() => {
      setDebouncedData(data);
    }, delay);
   // return () => {
      //clearTimeout(timerID);
    //};
  }, [data.blogTitle, data.blogDescription]);

  return debouncedData;
};

export default useDebounce;

i tried this but the cleartimeout was not working, the timeout was not being cleared, i didnt understand the reason.

can anyone explain?

Great article!

I've been using this pattern with hooks lately:

const [value, setValue] = useState()
const debouncedValue = useDebounce(value, 800)

It's clean and works well for most of the cases.

Here's a version useDebounce implemented using lodash: github.com/gnbaron/use-lodash-debo...

Great - thanks! The example would be easier to read if you included all the imports and exports. Great job.

Hi,
Thanks for the article. I'm curious about the chosen approch of providing a value to the custom hook that gets updates over time.

export default function useDebounce(value, delay) {

Here we listen to value changes in the custom hook with the inner useEffect and react to changes. Most of the hooks I'm familiar with treat the arguments they get as sort of initialization values that doesn't change overtime or even if changed are not monitored. For example useState, useReducer, useSelector, useMemo, useCallback, useRef are all hooks that doesn't react to changes of the initial values provided to the hook.

I know that your sample works and is valid implementation but I'm sure if it will not confuse developers who read the code. you could easily expose a second argument to update the value which will look very similar to useState

wdyt?

How could you modify this to make it a "leading" debounce?

Hmm this doesn't seem to work if you add text after the initial query (i.e. 'wolverine' as the first full term to debounce, then appending it to become 'wolverine x-men'.. the 'x-men' part doesnt show up until the debouncing times out). I feel like this code is so short and simple I should be able to figure it out, but I can't seem to see why the UI lags so hard on the second set of characters.

Thanks for share!

Very helpful, thank you! Years ago I needed something like this and ended up using throttle feature of redux sagas. Not bad, but I try to avoid redux (gets a bit unreadable over time).

I'm writing a new app and needed an "auto-save" feature where a form is auto-saved every x seconds, provided any of the inputs were changed. I started doing my own thing (setTimeout, setInterval) and luckily stumbled on this post. Saved me time. Elegant and it works.

Throttling API calls from UI is a very important technique to learn, I wish Facebook would throw some sort of "autocomplete" or "lookup text field" example where they use your code.

Loved the explanation. Thanks!
Although I would use useRef hook to set the timer variable to reduce the heap memory usage.

const useDebounce = (value, delay = 500) => {
  const [debouncedValue, setDebouncedValue] = useState();
  const timer = useRef(null);
  useEffect(() => {
    timer.current = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    return () => clearTimeout(timer.current);
  }, [value, delay]);

  return debouncedValue;
};

Why using useEffect for the api call? I don't see any issue with doing async api calls inside a component rendering function.

This makes the most since:

import { useCallback, useRef } from 'react'
export default function useDebounce(func, delay = 400) {
let debounce = useRef(null)
return useCallback(
(...args) => {
const context = this
clearTimeout(debounce.current)
debounce.current = setTimeout(() => {
func.apply(context, args)
}, delay)
},
[func],
)
}

Usage:

const handleWindowResize = useDebounce(SetWindow)

useEffect(() => {
window.addEventListener('resize', handleResize)

handleResize()

return () => {
  window.removeEventListener('resize', handleResize)
}

}, [])

Awesome! I had a similar project and this looked easier than I thought!

This is really elegant! Have you thought about publishing this as a node_module?

This was a great guide, had been struggling for a while with getting something like this to work.

Thanks!

Thanks! Helped me a lot

You've got a missing = here

const queryString `apikey=${apiKey}&titleStartsWith=${search}`;

Great read!
Just as a side note: you don't have to import react to your use-debounce.js.
" import { useState, useEffect } from 'react';"is just fine

Amazing, did not think to have debouncedValue instead of debounced version of callback.
Probably we better cancel processing in main useEffect to avoid race conditions.

this is not working, i am getting redundant calls, the function calls are not getting cancelled

Great work, thanks a lot. I want to write a similar post in my native language Bangla, is this ok if i use your post as reference and also your demo project to show how this work ?

thank you, kind sir!

Try to hold down any key and you will see, that searching appears 2 times - after 500 ms after the first character and after 500 ms after the last. How to avoid this glitch?

Very useful. I signed up only to thank you.

Excellent!
Needed this and was struggling a bit myself to get it to work flawlessly...
Thanks!

Very nice code! :) very helpfull

Thank you for sharing that, it's a very useful and simple way.