父组件创建setTimeout控制弹窗，子组件清除定时器失效求助

代码存在的几个关键问题 #

• 父组件中timerRef未用const声明，违反React Hooks规则；且直接在组件顶层赋值setTimeout，会导致组件每次渲染都重新创建定时器，覆盖之前的引用
• useEffect的清理函数调用clearTimeout()时未传入定时器实例，无法正确清除定时器；同时未设置依赖数组，会在每次组件渲染时重复执行清理与创建逻辑
• 子组件点击输入框仅清除定时器，但未更新父组件的isVisible状态，弹窗不会立即隐藏

修正后的代码 #

ParentComponent.tsx

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

const ParentComponent = () => {
    const [isVisible, setIsVisible] = useState(true);
    const timerRef = useRef<ReturnType<typeof setTimeout>>();

    useEffect(() => {
        // 组件挂载时初始化定时器
        timerRef.current = setTimeout(() => {
            setIsVisible(false);
        }, 5000);

        // 组件卸载时清除定时器，避免内存泄漏
        return () => {
            timerRef.current && clearTimeout(timerRef.current);
        };
    }, []); // 空依赖数组确保仅在挂载/卸载时执行

    // 统一处理隐藏弹窗的逻辑
    const hideModal = () => {
        timerRef.current && clearTimeout(timerRef.current);
        setIsVisible(false);
    };

    return (
        <div>
            <ChildrenComponent isVisible={isVisible} onInputClick={hideModal} />
        </div>
    );
};

ChildrenComponent.tsx

type Props = {
    isVisible: boolean;
    onInputClick: () => void;
};

const ChildrenComponent = ({ isVisible, onInputClick }: Props) => {
    return (
        <div className={`${isVisible ? 'display-block' : 'display-none'}`}>
            <form>
                <input onClick={onInputClick} />
            </form>
        </div>
    );
};

核心优化点 #

• 用useEffect包裹定时器逻辑，配合空依赖数组确保仅创建一次定时器，避免重复触发
• 清理函数正确传入定时器实例，防止组件卸载后定时器仍执行
• 父组件提供统一的弹窗隐藏方法，子组件只需调用该方法，符合React单向数据流原则
• 修复timerRef的声明方式，严格遵循Hooks使用规则

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