Как использовать setInterval в React

Что такое функция setInterval?

Функция setInterval() используется для многократного вызова функции или фрагмента кода через определенный промежуток времени. Пример:

setInterval(() => {
  console.log('you can see me every 3 seconds')
}, 3000);

Единственный способ остановить setInterval — вызвать функцию clearInterval с идентификатором или закрыть окно.

Использование setInterval в React хуках

Мы можем использовать функцию setInterval в React, точно так же, как мы можем использовать в JavaScript. В приведенном ниже примере мы используем функцию setInterval внутри хука useEffect.

// App.js

import React, { useEffect, useState } from "react";

export default function App() {
  const [seconds, setSeconds] = useState(1);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);
    
    // очистка интервала
    return () => clearInterval(timer);
  });

  return (
    <div className="App">
      <h1>Number of seconds is {seconds}</h1>
    </div>
  );
}

Хук useEffect запускает функцию обратного вызова (колбэк) при подключении компонента к dom, что аналогично методу жизненного цикла componentDidMount в компонентах-классах. Функция setInterval запускает метод setSeconds каждую секунду. Внутри хука useEffect мы возвращаем функцию clearInterval с аргументом timer, так что функция setInterval останавливается при отключении компонента от dom, что аналогично методу componentWillUnmount.

Использование setInterval в классовых компонентах

В этом примере показано, как использовать setInterval в компонентах-классах.

// App.js

import React from "react";

class App extends React.Component {
  state = {
    seconds: 1
  };

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ seconds: this.state.seconds + 1 });
    }, 1000);
  }

  componentWillUnMount() {
    clearInterval(this.timer);
  }

  render() {
    return (
      <div className="App">
        <h1>Number of seconds is {this.state.seconds}</h1>
      </div>
    );
  }
}

export default App;

В приведенном выше примере мы увеличиваем свойство this.state.seconds с помощью функции setInterval().

Что такое React Fragment?

React Fragment - это компонент React, который помогает нам возвращать несколько дочерних элементов без использования дополнительных DOM узлов. Если мы хотим вернуть группу элементов, то нужно обернуть их в общий тег. React компонент должен возвращать только один элемент, иначе будет ошибка. Следующий пример не будет работать, т.к. компонент возвращает несколько элементов - h1 и p.

import React from 'react';

function Welcome(props){
    return (
        <h1>Welcome to reactgo.com</h1>
        <p>Some dummy content</p>
    )
}

Фрагменты React представлены в версии 16. Давайте посмотрим на несколько примеров.

Без фрагментов React

import React from 'react';

function Welcome(props){
    return (
       <div>
        <h1>Welcome to reactgo.com</h1>
        <p>Some dummy content</p>
       </div>
    )
}

Теперь мы заменяем код компонента приветствия с помощью фрагментов.

С помощью React Fragments

import React,{Fragment} from 'react';

function Welcome(props){
    return (
       <Fragment>
         <h1>Welcome to reactgo.com</h1>
         <p>Some dummy content</p>
       </Fragment>
    )
}

Используя фрагменты, мы перестали создавать дополнительный элемент div в компоненте Welcome.

Короткий синтаксис фрагментов

Существует также краткий синтаксис для фрагментов.

import React from 'react';

function Welcome(props){

    return (
       <>
         <h1>Welcome to reactgo.com</h1>
         <p>Some dummy content</p>
       </>
    )
}

Этот синтаксис использует пустые теги для объявления фрагментов react.

Еще несколько примеров

Использование фрагментов при возврате группы дочерних компонентов.

function Button(){
    return <button>Click</button>
}

function Name(){
    return <h1>Hi react</h1>
}

function Post(){
    return (
        <div>
          <h1>Heading...</h1>
          <p>post content</p>
        </div>
    )
}

function App(){
    return (
        <>
         <Post/>
         <Name/>
         <Button/>
        </>
    )
}