I assume when component is rendered multiple times something happens to setinterval,but how can i fix this. bottom code is for Store that i am using and i don't understand.someone said that i must have useffect outside component but then it gives me error. Anyways im new to react so i need help ,everyones appriciated.Thanks.

      import SmallLogo from '../img/logo.svg';
      import StarskyText from '../img/starskyproject.svg';
      import './Statement.css'
      import { BrowserRouter as Router,Routes,Route,Link } from "react-router-dom";
      import { getElementError } from '@testing-library/react';
      import react, { useRef , useState,  useEffect } from 'react';
      import { useDispatch, useSelector } from "react-redux";
      import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
      import { store } from "./appReducer";

      function TempText(props) {
      return <span className="yellow changetext"> {props.body} </span>;
      }

      function doUpdate(callback) {
      setInterval(callback, 1300);
      }

      export default function Statement(){

      const dispatch = useDispatch();
      const textOptions = ["NFT", "CRYPTO", "METAVERSE", "WEB3"];
      const tempText = useSelector((state) => state.tempText);

    function change() {
  let state = store.getState();
  const index = state.index;
  console.log(index);
  console.log(textOptions[index]);
  dispatch({
    type: "updatetext",
    payload: textOptions[index]
  });
  let newIndex = index   1 >= textOptions.length ? 0 : index   1;
  dispatch({
    type: "updateindex",
    payload: newIndex
  });
}

useEffect(() => {
  doUpdate(change);
}, []);


var [dropdownOpen , Setdrop] = useState(false);



return(
      
    <div>
          <Link to="/">
          <img className='star-fixed' alt='starlogo' src={SmallLogo}></img>
          </Link>
        <img className='starsky-fixed' alt='starsky-project' src={StarskyText}></img>
        <div className='text-content'>
            <span className='statement-text'>WEB3 IS NOT ONLY THE FUTURE.
                        IT’S THE ONLY FUTURE!</span>
            <span className='starsk-link'>starsk.pro</span>
        </div>
        <div className='text-content-bottom'>
           <span className='statement-text-bottom'>CREATE YOUR NEXT  
           <TempText body={tempText} />
           <span className='flex'>  PROJECT WITH
            <Dropdown className="hover-drop-out" onm ouseOver={() => Setdrop(dropdownOpen=true) } onm ouseLeave={() => Setdrop(dropdownOpen=false)} isOpen={dropdownOpen} toggle={() => Setdrop(dropdownOpen = !dropdownOpen) }>
            <DropdownToggle className='hover-drop'>  STRSK.PRO </DropdownToggle>
            <DropdownMenu>  </DropdownMenu>
            </Dropdown> </span>
            </span>
        </div>
    </div>

)

}

     import { createStore } from "redux";
     const initialState = {
     tempText: "NFT",
     index: 1
     };

     const reducer = (state = initialState, action) => {
     switch (action.type) {
     case "updatetext":
     return {
      ...state,
     tempText: action.payload
      };
     case "updateindex":
     return {
    ...state,
      index: action.payload
    };
     default:
     return state;
      }
      };

      export const store = createStore(reducer);

CodePudding user response：

You can clear your timer by calling clearTimeout function with a reference to your timer when your component unmounting.

useEffect(() => {
  const timer = setInterval(change, 1300);
  // in order to clear your timeout
  return () => clearTimeout(timer);
}, [])