Как использовать метод setInterval() внутри компонентов React?

Метод setInterval() повторно выполняет функцию с заданным интервалом. В компоненте React мы можем использовать метод setInterval для обновления состояния компонента или выполнения других действий. Однако есть несколько предостережений, о которых следует помнить при использовании метода setInterval в компоненте React:

Утечки памяти: если компонент размонтируется до того, как интервал будет остановлен, функция обратного вызова продолжит выполнение и вызовет утечку памяти. Чтобы избежать этого, важно очищать интервал размонтирования компонента, вызывая clearInterval в функции очистки, предоставляемой useEffect.
Проблемы с синхронизацией: если компонент часто выполняет повторную визуализацию, интервал может не запускаться с ожидаемым интервалом из-за задержки между временем установки интервала и временем повторной визуализации компонента.
Производительность: когда несколько компонентов используют метод setInterval, это может привести к проблемам с производительностью.

Поэтому в React необходимо отслеживать жизненный цикл компонентов реакции и останавливать интервалы, когда компонент размонтируется.

Давайте разберемся, как использовать метод setInterval внутри компонента реакции, используя следующий пример:

Подход: мы создадим счетчик, значение которого обновляется через интервал в секунду, используя метод setInterval.

Реализация и настройка для создания приложения React:

Шаг 1: Создайте каталог проекта, перейдите к терминалу и создайте приложение для реагирования с именем counter-gfg, используя следующую команду:

npx create-react-app counter-gfg

После создания приложения counter-gfg переключитесь на новую Записьпапку counter-gfg, введя команду ниже:

cd counter-gfg

Шаг 2: Измените структуру вашего проекта:

Мы изменим папку и сохраним файлы, необходимые для этого примера. Теперь убедитесь, что ваша файловая структура выглядит следующим образом:

Структура проекта:

Окончательный каталог проекта

Шаг 3: Включите следующий код в файл index.html, расположенный в общей папке каталога вашего проекта.

index.html:

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <meta name="viewport"

          content="width=device-width, initial-scale=1" />

    <meta name="theme-color"

          content="#000000" />

    <meta name="description"

          content="Web site created using create-react-app" />

    <title>Using setOnterval method in React Components</title>

</head>

<body>

    <div id="root"></div>

</body>

</html>

Шаг 4: Создание компонента счетчика:

Метод setIntervalиспользуется внутри хука useEffect для увеличения переменной состояния count каждую секунду (1000 миллисекунд).
Метод clearIntervalиспользуется внутри функции очистки useEffect для остановки интервала при размонтировании компонента.
Хук useState инициализирует переменную состояния count со значением 0. Затем хук useState вызывается с функцией в качестве аргумента, которая устанавливает интервал и сохраняет возвращенный идентификатор интервалакак interval.
Функция setInterval принимает два аргумента: функцию обратного вызова, которая будет выполняться повторно, и задержку в миллисекундах. Здесь функция обратного вызова увеличивает переменную состояния счетчика, вызывая функцию setCount, которая обновляет значение счетчика.
Хук useEffect также возвращает функцию очистки, которая останавливает интервал, вызывая функцию clearInterval, когда компонент размонтируется или во время изменения переменной состояния счетчика. Это предотвращает утечку памяти и другие проблемы, возникающие при использовании setInterval в компоненте React.

App.js:

Javascript

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

const Counter = () => {

    const [count, setCount] = useState(0);

    useEffect(() => {

        //Implementing the setInterval method

        const interval = setInterval(() => {

            setCount(count + 1);

        }, 1000);

        //Clearing the interval

        return () => clearInterval(interval);

    }, [count]);

    return <h1>{count}</h1>;

}

export default Counter;

Шаг 5: Добавьте следующий код в файл index.js. Файл index.js служит основной точкой входа, а внутри него файл App.js отображается с корневым идентификатором DOM.

index.js:

Javascript

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>

);