Как реализовать React-компонент с setInterval при монтировании и выводить "Hello world" в консоль каждые 10 секунд? Что учесть при очистке таймера?

Вывод через React setInterval в консоль

• функциональный компонент, использующий хук useEffect
• внутри useEffect необходимо создать setInterval с периодом 10 секунд (10000 мс)
• при размонтировании нужно обязательно очистить интервал через return из useEffect с помощью clearInterval
• пустой массив зависимостей [] в useEffect обеспечивает однократный запуск интервала при монтировании
• если интервал не очищать, возможны утечка памяти и вызовы уже после размонтирования компонента
• для хранения ID интервала при необходимости дополнительного доступа можно применить useRef
• в callback setInterval следует выполнять вывод в консоль: console.log("Hello world")

Пример кода:

import React, { useEffect } from 'react';

function HelloWorldInterval() {
useEffect(() => {
const intervalId = setInterval(() => {
console.log("Hello world");
}, 10000);

return () => clearInterval(intervalId);
}, []);

return <div>Interval запущен</div>;
}

Такой вариант позволяет корректно запускать и останавливать интервал, избегая утечек памяти и ненужных вызовов.

Подробный ответ

Основной ответ

Чтобы React-компонент при монтировании запускал setInterval и каждые 10 секунд выводил в консоль "Hello world", лучше всего воспользоваться хуком useEffect. Интервал создаётся внутри эффекта, а при размонтировании компонента его необходимо удалить с помощью clearInterval. Это предотвращает утечки памяти и нежелательные повторные вызовы.

import React, { useEffect } from 'react';

function HelloWorldLogger() {
useEffect(() => {
const id = setInterval(() => {
console.log('Hello world');
}, 10000);

return () => clearInterval(id); // Очистка при размонтировании
}, []);

return null; // Или любой другой UI, если нужен
}

Ключевые моменты

• useEffect с пустым массивом зависимостей ([]) выполняется один раз во время монтирования, подобно componentDidMount.
• Функция очистки, возвращаемая эффектом, не даёт таймеру продолжать работу после удаления компонента. Это особенно важно, когда компонент динамически появляется и исчезает.
• Период в 10 секунд передаётся в миллисекундах, поэтому используется значение 10000.
• Если идентификатор интервала потребуется использовать в другом хуке или обработчике, для его хранения можно применить useRef.

Практический контекст

В прикладных проектах этот паттерн подходит для периодического обновления данных, heartbeat-запросов и логирования. При этом частый запуск операций через setInterval способен повлиять на производительность и энергопотребление, поэтому период следует выбирать с учётом бизнес-логики и нагрузки. В React 18+ при включённом режиме Strict Mode эффект в разработке выполняется дважды, чтобы обнаруживать сайд-эффекты, — это необходимо учитывать во время тестирования.