如何封装自定义React Hook实现带延迟自动重置的状态功能？

核心思路 #

原逻辑是设置值为true后延迟一段时间自动切回false，封装成Hook需要满足：

• 提供类似useState的[状态, 设置函数]返回格式
• 自动管理定时器，避免内存泄漏
• 支持自定义初始值和延迟时长

完整实现代码 #

import { useState, useRef, useCallback, useEffect } from 'react';

function useSetWithDelay(initialValue: boolean, delay: number) {
  const [state, setState] = useState(initialValue);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  const setDelayedState = useCallback((value: boolean) => {
    // 清除之前未执行的定时器，避免逻辑冲突
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    setState(value);

    // 仅当设置为true时，启动延迟重置定时器
    if (value) {
      timeoutRef.current = setTimeout(() => {
        setState(false);
        timeoutRef.current = null;
      }, delay);
    }
  }, [delay]);

  // 组件卸载时清除残留定时器，防止内存泄漏
  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []);

  return [state, setDelayedState] as const;
}

关键细节说明 #

• 用useState管理状态：替代原代码的useRef，确保状态变化能触发组件重新渲染，符合React的状态更新机制
• useRef存储定时器ID：用来在设置新值或组件卸载时清除未完成的定时器，避免逻辑混乱和内存泄漏
• useCallback包裹设置函数：避免每次组件渲染都创建新的函数引用，优化性能，同时确保依赖变化时更新函数
• 卸载清理逻辑：通过useEffect的返回函数清除定时器，避免组件卸载后定时器仍执行导致报错

使用示例 #

const [X, setX] = useSetWithDelay(false, 1000);
const [Y, setY] = useSetWithDelay(false, 2000);

// 调用setX(true)后，X会在1秒后自动变为false

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