React: Сообщение в консоль при первом рендере (useEffect)

Выведите важное сообщение в консоль при первом рендере компонента с помощью useEffect — оно пригодится для быстрой диагностики и наблюдения за жизненным циклом.

Бизнес-кейс. DebugBeacon — маяк для инженеров: при старте компонента в консоли появляется важное диагностическое сообщение.

Что сделать

Используйте useEffect и выведите в консоль сообщение ровно один раз при монтировании.
Добавьте маркер, например "[DebugBeacon] Component mounted", чтобы легче искать в логах.
Не вызывайте лог на последующих рендерах: зависимостей у эффекта быть не должно, используйте [].

Как выглядит

Карточка с кратким описанием и инструкцией открыть консоль. Превью: UI задачи

💡 Подсказка

useEffect(() => { console.log('[DebugBeacon] Component mounted'); }, []);
Пустой массив зависимостей гарантирует вызов только при монтировании.
Не используйте дополнительные состояния без нужды — это задача на жизненный цикл.

👀 Решение

import React, { useEffect } from 'react';
import './styles.css';
 
export function DebugMessage() {
  useEffect(() => {
    console.log('[DebugBeacon] Component mounted');
  }, []);
 
  return (
    <article className="card" data-testid="debug-card">
      <header>
        <h2 className="title">DebugBeacon: консольное сообщение</h2>
        <p className="subtitle">Сообщение важно для дебага запуска компонента</p>
      </header>
      <div className="row">
        <p>Откройте консоль браузера — сообщение выводится один раз при монтировании.</p>
      </div>
    </article>
  );
}
 
export default function App() {
  return (
    <main className="challenge-container">
      <section>
        <DebugMessage />
      </section>
    </main>
  );
}

Что сделать

Как выглядит

React: Сообщение в консоль при первом рендере (useEffect)

Что сделать

Как выглядит

🧑‍💻 Это не баг! Это фича!