SetTimeOut

import React from "react";
import PropTypes from "prop-types";
import { useState } from "react";
const Slider = ({ slider }) => {
  const [slide, setSlide] = useState(0);
  const handleSlide = (index) => {
    setSlide(index);
  };
  setTimeout(() => {
    console.log(slide);
    setSlide((prevState) =>
      prevState === slider.length - 1 ? 0 : (prevState += 1)
    );
  }, 3000);
  return (
    <div className="main__slider">
      <div className="main__textBox">
        <p>{slider[slide]}</p>
      </div>
      <ul className="main__dots">
        {slider.map((dot, index) => (
          <li className="main__dots-item" key={index}>
            <button
              type="button"
              onClick={() => handleSlide(index)}
              className={
                "main__dot" + (slide === index ? " main__dot-active" : "")
              }
            ></button>
          </li>
        ))}
      </ul>
      ;
    </div>
  );
};
Slider.propTypes = {
  slider: PropTypes.array.isRequired,
};
export default Slider;

import React from "react";
import "./styles.css";
 
export default function App() {
  const [state, setState] = React.useState(0);
  React.useEffect(() => {
    setTimeout(() => {
      setState(state + 1);
    }, 3000);
  }, [state]);
 
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div>State: {state}</div>
    </div>
  );
}

React.useEffect(() => {
   setTimeout(() => {
     setSlide( slide === slider.length - 1 ? 0 : (slide + 1)
     );
   }, 3000);
}, [slide]);

  const timeout = React.useRef();
  React.useEffect(() => {
    clearTimeout(timeout.current);
    timeout.current = setTimeout(
      () => setSlide(slide === slider.length - 1 ? 0 : slide + 1),
      3000
    );
  }, [slide]);

  const timeout = React.useRef();
  React.useEffect(() => {
    clearTimeout(timeout.current);
    timeout.current = setTimeout(
      () => setSlide(slide === slider.length - 1 ? 0 : slide + 1),
      3000
    );
    return _ => clearTimeout(timeout.current)
  }, [slide]);