如何在 React 中实现一个可复用的防抖（debounce）自定义 Hook？

如何在 React 中实现一个可复用的防抖（debounce）自定义 Hook？

回答：

可以使用 useState 和 useEffect 创建一个自定义 Hook，例如 useDebounce，它接收一个值和延迟时间，返回防抖后的值。示例如下：

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

使用方式：

function SearchInput() {
  const [inputValue, setInputValue] = useState('');
  const debouncedValue = useDebounce(inputValue, 500);

  useEffect(() => {
    // 仅当用户停止输入 500ms 后才发起搜索请求
    if (debouncedValue) {
      fetchSearchResults(debouncedValue);
    }
  }, [debouncedValue]);

  return <input value={inputValue} onChange={e => setInputValue(e.target.value)} />;
}

解析：

• 防抖（debounce）是一种优化高频触发事件（如输入、滚动、窗口调整）的策略，它确保在一定时间间隔内只执行一次操作。
• 在 React 中，自定义 Hook 是封装逻辑、实现复用的理想方式。
• useDebounce 利用 useEffect 监听输入值变化：每当 value 更新，会设置一个新的定时器；如果在 delay 时间内 value 再次变化，则上一个定时器会被清除（通过 useEffect 的清理函数），从而避免不必要的更新。
• 注意依赖数组中必须包含 value 和 delay，否则可能造成闭包陷阱或延迟失效。
• 该 Hook 适用于搜索框、表单验证、窗口尺寸监听等场景，有效减少渲染和网络请求次数，提升性能。