useDebouncedCallback - doesnt update when inner function updates

[Piotr Pliszczyński]

const Component = ({ sameFlag }) => {
  const fetchData = useCallback(() => {
     //...
  }, [someFlag])
  
  const debouncedFetch = useDebouncedCallback(fetchData, 50)
  
  useEffect(() => {
    debouncedFetch()
  }, [debouncedFetch])

  return <></>
}

and what i expect to happen is whenever someFlag changed, fetchData update and debouncedFetch also will update and will trigger the useEffect

but it doesn't do like so

is it intended ? or what?

use-debounce version:
9.0.3

[Nik]

Hey @fookoo
Thanks for the question!

useDebouncedCallback returns a constant value, as one of the common usages is to pass the function as param to the component below. So the simplest solution is to just change the dependency from debouncedFetch to someData in useEffect. However, some eslint rules can be triggered.

You can simplify the code:

const Component = ({ someFlag }) => {
  const debouncedFetch = useDebouncedCallback(() => {...}, 50)
  
  useEffect(() => {
    debouncedFetch(someFlag)
  }, [someFlag])

  return <></>
}

[Piotr Pliszczyński]

yeah we did like this, but esLint isn't happy about

at the end we resign from using debounceCallback at all