useState的setState是否触发组件全量重渲染？倒计时重定向实现疑问

首先确认你的基础认知完全正确：函数式组件在状态更新后，确实会重新执行整个函数体，触发重渲染

原代码逻辑分析 #

你贴出的原代码中，useEffect的依赖项包含count，所以每次count更新时，都会先执行 cleanup 函数销毁上一轮创建的setInterval，再重新执行effect回调创建新的setInterval。本质上相当于每1秒就销毁旧定时器、创建新定时器，完全没有发挥setInterval一次创建、重复执行的特性。

为什么setTimeout可以实现相同效果 #

当你把setInterval替换为setTimeout时，代码逻辑和原代码的执行流程完全一致：

useEffect(() => {
  const timer = setTimeout(() => {
    setCount(prev => prev - 1);
  }, 1000);
  count === 0 && history.push("/");
  return () => clearTimeout(timer);
}, [count]);

两种写法的运行效果没有任何差异，所以你测试时可以正常运行。原代码选择用setInterval属于冗余写法，没有特殊的技术考量，大概率是作者对React hook依赖项的执行逻辑理解不够到位导致的。

正确的setInterval使用姿势 #

如果要发挥setInterval的特性，应该调整依赖项为history，整个组件生命周期只会创建一次定时器，性能更好、计时精度也更高：

import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";

const LoadingToRedirect = () => {
  const [count, setCount] = useState(5);
  const history = useHistory();

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(currentCount => {
        const newCount = currentCount - 1;
        if (newCount === 0) {
          clearInterval(interval);
          history.push("/");
        }
        return newCount;
      });
    }, 1000);
    // 组件卸载时清理定时器，防止内存泄漏
    return () => clearInterval(interval);
  }, [history]);

  return (
    <div className="container p-5 text-center">
      <p>Redirecting you in {count} seconds</p>
    </div>
  );
};

export default LoadingToRedirect;

两种实现的差异场景 #

如果组件在倒计时过程中没有其他状态更新、也不会被意外中断，两种写法用户感知不到区别，仅在极端场景下有差异：

• 反复销毁重建定时器的写法（原setInterval写法、setTimeout写法）计时精度稍差，极端情况下如果组件渲染卡顿，倒计时的间隔会大于1秒，调度开销也更高。
• 单次创建setInterval的写法计时精度更高，调度开销更小。

内容的提问来源于stack exchange，提问作者anandsr-dev