React中useEffect清理阶段运行机制及防抖实现疑问

问题背景 #

我尝试在React中使用useEffect实现搜索防抖功能，功能可正常运行，但我并不理解其执行流程。相关代码如下：

const [query, setQuery] = useState('')
const [posts, setPosts] = useState([])
useEffect(() => {
    console.log('run useEffect')
    const getData = async () => {
        const {data, status} = await axios.get(`${url}${query}`)
        if(status === 200) setPosts(data.hits)
    } 
    const delay = setTimeout(() => {
        console.log('run fetch')
        getData()
    }, 2000)

    return () => {
        console.log('unmounted')
        clearTimeout(delay)
    }
}, [query])

其中query是输入框中通过onChange事件修改的值。当我输入查询词（如'redux'）时，控制台输出顺序如下：

unmounted
run useEffect
unmounted
run useEffect
unmounted
run useEffect
unmounted
run useEffect
unmounted
run useEffect
run fetch

我想了解React中useEffect的清理阶段是如何运行的？以及为什么会先执行return函数中的代码？

问题解答 #

1. useEffect清理阶段的运行逻辑 #

useEffect返回的函数（清理函数）有两个明确的触发时机：

• 当组件完全卸载时，必然会执行清理函数；
• 当useEffect的依赖项（这里是query）发生变化时，在下一次useEffect回调执行前，会先调用上一轮useEffect返回的清理函数。

你的场景属于第二种：每次输入字符修改query，都会触发组件重新渲染，而useEffect依赖query，所以每次query更新后，React会先清理上一轮副作用的遗留操作，再执行新的副作用逻辑。

2. 为什么先执行return里的代码 #

以输入'redux'的整个过程为例：输入分为5次（r、e、d、u、x），每输入一个字符就会更新query，触发一次组件重渲染。

拿前两次输入（r → e）的流程拆解：

1. 输入'r'，query变为'r'，组件渲染，执行第一轮useEffect——设置了一个2秒后执行的定时器；
2. 2秒还没到，输入'e'，query变为're'，组件开始重新渲染；
3. React检测到useEffect的依赖query发生变化，先执行第一轮useEffect的清理函数：打印'unmounted'并清除上一轮的定时器，避免它发起基于旧query的无效请求；
4. 接着执行第二轮新的useEffect，设置基于新query的2秒定时器。

直到输入完最后一个字符'x'后，2秒内没有再修改query，这一轮的定时器没有被清理，到时间就执行run fetch发起请求。

这种设计的核心目的是：让你能在依赖更新时，及时清理上一轮副作用留下的冗余操作（比如旧定时器、未完成的请求），避免资源浪费或错误的状态更新。

内容的提问来源于stack exchange，提问作者tam.dangc