使用rooks的useDebounce钩子时如何正确设置loading状态？

问题原因 #

你当前的写法里setIsLoading(true)和setIsLoading(false)是同步执行的，而useDebounce返回的函数仅会把你传入的setSearchFilter逻辑延迟执行，调用防抖函数本身不会阻塞后续代码运行。因此setIsLoading(false)会在调用debouncedSearchFilterChange后立刻执行，React的状态批量更新机制甚至会直接合并两次isLoading的状态更新，导致你完全看不到isLoading变为true的过程。

解决方案 #

把setIsLoading(false)的逻辑放到防抖回调内部，确保延迟1秒后才执行状态重置：

const [isLoading, setIsLoading] = React.useState(false);

// 自定义防抖回调，包含过滤条件更新和loading重置逻辑
const debouncedSearchFilterChange = useDebounce((filterText: string) => {
  setSearchFilter(filterText);
  setIsLoading(false);
}, 1000);

const handleFilterChange = (filterText: string) => {
  setIsLoading(true);
  debouncedSearchFilterChange(filterText);
};

补充说明 #

如果用户连续触发handleFilterChange，防抖函数会自动取消前一次的延迟执行任务，仅保留最后一次的执行逻辑，对应isLoading会在用户停止输入1秒后才变为false，符合连续输入场景下的加载状态交互预期。

内容的提问来源于stack exchange，提问作者webber