React 和 setTimeout/setInterval 导致渲染问题

Question

I am quite new to React, learning it for 1 year, but I stuck with the simple slideshow component. I have to display images in a 2 seconds interval, but it causes the background to clip or rather re-render when scrolling. I have to solve it, which means I must use some sort of autoplay and still not break the page. I attach the code and a GIF that shows my issue and it can be seen that a background-colored row appears above the image slideshow. Also when I removed the whole component the page did not produce this rendering issue. Please I really need some help regarding this problem, I am hoping somebody who is more experienced with React can tell me how to approach this. The slideshow component:

import React, { useState, useEffect } from "react";
import { hands } from "../../../../assets/images/landing_hands/index.js";
import { AnimatePresence, motion } from "framer-motion";

const ImageSlideShow = () => {
    const [slideShowInterval, setSlideShowInterval] = useState(null);
    const [activeImage, setActiveImage] = useState(0);

    const DURATION = 2000;
    const killAutoPlay = () => {
        console.log("killing interval");
        clearInterval(slideShowInterval);
        setSlideShowInterval(null);
    };

    const startAutoPlay = () => {
        if (slideShowInterval === null) {
            console.log("starting interval");
            const int = setInterval(() => {
                setActiveImage((prev) => {
                    let nextIndex = prev + 1;

                    if (nextIndex >= hands.length) {
                        return 0;
                    } else return nextIndex;
                });
            }, DURATION);

            setSlideShowInterval(int);
        }
    };

    useEffect(() => {
        document.addEventListener(
            "visibilitychange",
            () => {
                console.log(document.visibilityState);
                if (document.visibilityState === "hidden") {
                    killAutoPlay();
                } else {
                    startAutoPlay();
                }
            },
            false
        );

        return () => {
            document.removeEventListener("visibilitychange", () => {});
        };
    }, []);
    return (
        <AnimatePresence>
            <motion.img
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                src={hands[activeImage]}
                alt={"nft"}
            />
        </AnimatePresence>
    );
};

export default ImageSlideShow;

GIF: https://lh4.googleusercontent.com/t_dQ7NqHxHfcZJzd-FV00Sg2NaBd5nZ1uaUohFafnL06qyx5bFQRIgPHBHJwZkeQva8=w2400

I appreciate all your effort and answers.

I updated the code with Sergey Sosunov's approach, still getting the rendering glitch, deplyed the app to Vercel and made the repository public. https://vercel.com/zsoltgombocz/cwp-new https://github.com/zsoltgombocz/cwp-new

Also after the new code added to the project, I captured the screen to show how the purple backgroud glitches through the image slideshow. https://lh6.googleusercontent.com/fhqqH5SOOt-PbM4K03qADwQEJKNg_fXR-IU1iCdbD7gXUx2F5TKKnluo6aUenEQFZnE=w2400

Answer 1

I tried to reproduce your issue but the only thing i faced was multiple setTimeouts execution. Your document.removeEventListener is invalid and does not work as expected, also, things should be done much more easier than you did.

import { useState, useEffect } from "react";
import { hands } from "./hands";
import "./styles.css";
import { AnimatePresence, motion } from "framer-motion";

export default function App() {
  return (
    <div className="App">
      <ImageSlideShow />
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const ImageSlideShow = () => {
  const DURATION = 2000;
  const [isVisible, setIsVisible] = useState(true);
  const [activeImage, setActiveImage] = useState(0);

  useEffect(() => {
    if (!isVisible) return;
    const intervalId = setInterval(() => {
      setActiveImage((prev) => {
        const next = prev + 1;
        return next >= hands.length ? 0 : next;
      });
    }, DURATION);

    return () => clearInterval(intervalId);
  }, [isVisible]);

  useEffect(() => {
    const onVisibilityChange = () => {
      console.log(document.visibilityState);
      setIsVisible(document.visibilityState !== "hidden");
    };

    document.addEventListener("visibilitychange", onVisibilityChange);

    return () => {
      document.removeEventListener("visibilitychange", onVisibilityChange);
    };
  }, []);

  return (
    <AnimatePresence>
      <motion.img
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        src={hands[activeImage]}
        alt={"nft"}
      />
    </AnimatePresence>
  );
};

Try to change your code to this one and tell if issue still exists. If yes - i honestly dont know how to help until you provide a way to reproduce it.