自定义的useDebounce是怎么实现节流的？

Question

题目描述

我在学习react的时候，跟着视频敲了一个自定义的useDebounce Hook,但我不是很明白其运行的原理，想请教一下大家

题目来源及自己的思路

比如我以较快的速度敲入1、2、3，控制台输出如下

所以当我输入一个数时，是先运行return的销毁吗，还是先运行定时器的建立，为什么在敲完最后一个数时，不会把敲完后建立的定时器销毁？这跟任务队列有关吗？为什么页面初始化时输出的定时器已建立之前没有定时器已销毁？

相关代码

export const useDebounce = (value, delay) => {
    const [debouncedValue, setDebouncedValue] = useState(value)

    useEffect(() => {
        const timeout = setTimeout(() => {
            setDebouncedValue(value)
            console.log('定时器已建立')
        }, delay)
        return () => {
            clearTimeout(timeout)
            console.log('定时器已销毁')
        }
    }, [value, delay])

    return debouncedValue
}

Answer 1

我懂了，是useEffect的原因，useEffect的return是在其销毁后才执行的，而不是跟普通函数一样执行（是我没理解好），所以在下一次调用前才会执行上一次的return进行销毁，而不影响此次的创建