React Hooks中setInterval遍历数组到末尾无法停止如何解决

基于React Hooks实现命令行风格逐字打印姓名动画时，预期输出到Felipe Garcia Diaz后定时器自动停止，实际运行时定时器不会终止，最终显示文本消失，且定时器持续在后台占用资源。
原实现代码（文件HooksExample.jsx）如下：

import React, {useState} from 'react';
import socket from './socket';

function Main(props) {
    let introArray = ["_","F_", "Fe_", "Fel_", "Feli_", "Felip_", "Felipe_", "Felipe _", "Felipe G_", "Felipe Ga_", "Felipe Gar_", "Felipe Garc_", "Felipe Garci_", "Felipe Garcia_"];

    let [myName, setName] = useState(introArray);
    let [climber, setClimber] = useState(0);

    let block = false;
    if(block === false) {
        let climbArray = () => {
            setClimber(climber += 1);
            if(climber === introArray.length) {
                block = true;
                console.log('dead');
            }
            console.log('live', climber);
        }
        setInterval(climbArray, 200);
    }
    return (
        <React.Fragment>
            <h1>{myName[climber]}</h1>
        </React.Fragment>
    );
}


export default Main;

• 普通变量block定义在组件函数体内，每次组件重渲染都会被重置为false，原本设计的阻断逻辑完全失效，每次渲染都会新建一个定时器，最终后台会堆积大量重复运行的定时器
• 状态更新写法错误：直接执行climber +=1修改state不符合React状态更新规则，加上setInterval的闭包陷阱，判断停止条件时拿不到最新的索引值，无法触发停止逻辑
• 定时器属于副作用逻辑，直接写在组件函数体中没有通过useEffect管理，也从未执行过clearInterval清除操作，即使组件卸载定时器也会持续运行
• 数组introArray缺少最终目标值Felipe Garcia Diaz，当索引增长到等于数组长度时，myName[climber]会取到undefined，直接导致文本消失
• 固定不变的introArray被冗余存放到state中，属于不必要的状态设计。

import React, {useState, useEffect, useRef} from 'react';
import socket from './socket';

function Main(props) {
    // 补全最终输出的姓名项
    const introArray = ["_","F_", "Fe_", "Fel_", "Feli_", "Felip_", "Felipe_", "Felipe _", "Felipe G_", "Felipe Ga_", "Felipe Gar_", "Felipe Garc_", "Felipe Garci_", "Felipe Garcia_", "Felipe Garcia Diaz"];
    const [climber, setClimber] = useState(0);
    // 存储定时器ID，方便跨渲染周期清除
    const timerRef = useRef(null);

    useEffect(() => {
        // 索引走到最后一项时清除定时器，终止动画
        if (climber >= introArray.length - 1) {
            clearInterval(timerRef.current);
            return;
        }
        // 创建逐帧更新的定时器
        timerRef.current = setInterval(() => {
            // 用函数式更新获取最新索引值，规避闭包问题
            setClimber(prev => prev + 1);
        }, 200);

        // effect执行前、组件卸载时清除上一个定时器，防止内存泄漏
        return () => clearInterval(timerRef.current);
    }, [climber, introArray.length])

    return <h1>{introArray[climber]}</h1>;
}

export default Main;

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