useDebouncedCallback - doesnt update when inner function updates
fookoo opened this issue · 2 comments
fookoo commented
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
xnimorz commented
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 <></>
}
fookoo commented
yeah we did like this, but esLint isn't happy about
at the end we resign from using debounceCallback at all