Как сделать, чтобы на Реакте useEffect срабатывал раз в N секунд?

Question

Как сделать,чтобы на Реакте useEffect срабатывал например раз в 5 секунд. Я так понял, надо зависимость написать?

Answer 1

Можно написать useEffect который запускается 1 раз и запускает setInterval. В setInterval мы можем запускать необходимую функцию с заданным интервалом милисекунд. Получается примерно так:

// import React from "react";

const App = () => {
  const [state, setState] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => {
      console.log("id:", id);
      setState((prevState) => prevState + 1);
    }, 1000);

    return () => {
      clearInterval(id);
    };
  }, []);

  return <div>State:{state}</div>;
};

// export default App;


ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

import { useEffect, useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setTimeout(() => {
      setCount(count + 1);
    }, 1000);
  }, [count]);
  return <div className="App">{count}</div>;
}

БЛОГ НА HUSL

Как сделать, чтобы на Реакте useEffect срабатывал раз в N секунд?

Ответы (2 шт):