Как использовать 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().

Фронтенд-разработка – это одна из наиболее динамично развивающихся областей в сфере информационных технологий. Она отвечает за создание пользовательского интерфейса веб-приложений и сайтов. Чтобы стать успешным фронтенд-разработчиком и оставаться в курсе всех последних тенденций и новинок, необходимо постоянно обучаться. И здесь книги являются отличным источником знаний.

1. "HTML и CSS. Дизайн и верстка сайтов" автора Дж. Даккета

Эта книга является практическим руководством для начинающих фронтенд-разработчиков. Она охватывает основы создания веб-страниц, включая HTML-разметку и CSS-стилизацию. Книга содержит множество практических примеров, что поможет вам лучше разобраться в синтаксисе и концепциях языков HTML и CSS.

2. "Eloquent JavaScript" автора Марица Хавербеке

Эта книга также посвящена JavaScript, но она охватывает его более продвинутые темы. В книге вы найдете информацию о функциональном программировании, асинхронных операциях, модулях, классах и других продвинутых концепциях языка. Книга содержит множество примеров кода и задач для самостоятельной работы.

3. "CSS Secrets. Полное руководство по созданию современных веб-сайтов"

Если вы уже знакомы с основами CSS, эта книга поможет вам улучшить свои навыки и научиться создавать более современные и красивые веб-сайты. В книге вы найдете советы и приемы по использованию новых возможностей CSS, таких как гибкие блоки, анимации и трансформации.

4. "Регулярные выражения" автора Дж. Фридл

Регулярные выражения являются мощным инструментом в фронтенд-разработке. Они позволяют осуществлять расширенный поиск и обработку текста. В этой книге вы узнаете о синтаксисе, особенностях и практическом применении регулярных выражений. Книга содержит множество примеров и упражнений, чтобы вы смогли применять полученные знания на практике.

5. "Принципы объектно-ориентированного программирования в JavaScript" автора Николаса Закаса.

JavaScript поддерживает объектно-ориентированное программирование (ООП), и его правильное использование может значительно улучшить качество вашего кода. В этой книге вы узнаете о принципах ООП и их применении в JavaScript. Книга также содержит множество примеров и лучших практик программирования. Не забывайте, что эти книги только являются рекомендациями, и вы всегда можете выбрать другие источники знаний в зависимости от своих интересов и потребностей. Но помните, что читать книги – это только одна из составляющих обучения. Практика и постоянное обновление навыков также важны для становления успешным фронтенд-разработчиком.