I’m encountering a peculiar issue with the setTimeout function in my React application that seems to vary in behavior across different devices. On my local machine, everything works as expected, but when testing on other devices (such as mobile phones or tablets) using the network url or even on the vercel domain the setTimeout function behaves inconsistently.

const VideoPlayer = ({ url, cb, videopause, setVideoPause }) => {

  // videopause IS FALSE BY DEFAULT
  const [pauseTimeout, setPauseTimeout] = useState(null);

  const handleEnded = () => {
    cb();
  };

  const handlePause = () => {
    if (pauseTimeout) {
      clearTimeout(pauseTimeout);
    }

    const timeout = setTimeout(() => {
      setVideoPause(videopause => !videopause);
    }, 1000); //ADDING THE TIMEOUT BECAUSE OF FLICKERING OF VIDEO DUE TO RESIZING THE VIDEO WIDTH ON PAUSE AND PLAY ON SEEK EVENT

    setPauseTimeout(timeout);
  };

  const handlePlay = () => {
    if (pauseTimeout) {
      clearTimeout(pauseTimeout);
    }
    setVideoPause(false);
  };

  return (
    <>
      <div
        className={`${videopause
          ? "XYZ"
          : "XYZ"
          } rounded-lg relative flex `}
      >
        <ReactPlayer
          className="react-player"
          url={url}
          width="100%"
          height="100%"
          controls={videopause ? false : true}
          playing={!videopause}
          onEnded={handleEnded}
          onPause={handlePause}
          onPlay={handlePlay}
          onSeek={() => setVideoPause(false)} // ADDED THIS SO THAT THE VIDEO DOESNT PAUSE WHILE SEEKING
          onSeeked={() => setVideoPause(false)}
        />
        {videopause && (
          //MAKING THE VIDEO SMALLER AND MOVE IT TO THE START OF THE DIV
        )}
      </div>
    </>
  );
};

export default VideoPlayer;

I’ve tested the application on different browsers (Chrome, Incognito and Edge) across devices, but the issue persists regardless of the browser used. I have used the ‘yarn dev –host’ and ran the application on different devices but the issue persists on every other device expect for the one im working on. I have change the no throttling to slow 3g in my working device and same issue is here as well.

I have added this setTimeOut because i couldn’t find a better idea to deal with the flickering issue. I have asked this question few days ago but didnt get a reply. here is the link:

React video player causing issues on the onPause event. It glitches with the seek bar of the video

Also i have tried this as well:
React – useState – why setTimeout function does not have latest state value?

but doesnt seem to work in my case