React中实现自动幻灯片如何避免过多重渲染？

问题原因 #

你的代码里useEffect的依赖数组包含了currentSlide，这会导致每次setCurrentSlide更新状态后，useEffect都会重新执行：清除旧的定时器，再创建新的定时器。而新定时器又会触发setCurrentSlide，形成无限循环，最终触发"Too many re-renders"错误。

另外，你在定时器里打印的currentSlide因为闭包特性，始终会是初始值0，无法反映实时状态。

修复方案 #

移除依赖数组中的currentSlide，同时利用setCurrentSlide的函数式更新（它能获取到最新的状态值），确保逻辑正确：

const { slideshow, isError, isLoading } = useSlideshow();
const [currentSlide, setCurrentSlide] = useState(0);
// 假设slideshow返回的幻灯片数组为slides，根据实际结构调整变量名
const slides = slideshow?.slides ?? [];

useEffect(() => {
    // 无幻灯片时不创建定时器
    if (slides.length === 0) return;

    const interval = setInterval(() => {
        setCurrentSlide(prevSlide => (prevSlide + 1) % slides.length);
    }, 5000); // 按需求改为5秒切换

    return () => clearInterval(interval);
}, [slides.length]); // 仅依赖幻灯片数量，数量变化时重新初始化定时器

// 单独监听currentSlide做打印或其他操作
useEffect(() => {
    console.log("currentSlide", currentSlide);
}, [currentSlide]);

关键说明 #

1. 移除currentSlide依赖：函数式更新setCurrentSlide(prevSlide => ...)不需要依赖currentSlide，React会自动传入最新状态值，避免不必要的useEffect触发。
2. 处理空幻灯片场景：当slides.length为0时直接返回，避免创建无效定时器。
3. 分离状态监听：将打印或其他基于currentSlide的操作单独放在一个useEffect中，避免与定时器逻辑耦合。

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