React: Console message on first render (useEffect)

Log an important message to the console on the component’s first render using useEffect. This helps diagnose lifecycle and startup behavior quickly.

Business case. DebugBeacon — a beacon for engineers: on component startup, the console shows a diagnostic message.

What To Do

Use useEffect and log to the console exactly once on mount.
Include a marker like "[DebugBeacon] Component mounted" to make logs easier to filter.
Do not log on re-renders: use an empty dependency array [].

Final View

A card with short instructions to open the console. Preview: Challenge UI

💡 Hint

useEffect(() => { console.log('[DebugBeacon] Component mounted'); }, []);
An empty dependency array ensures the effect runs only on mount.
Avoid extra state unless necessary — focus on lifecycle.

👀 Solution

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: console message</h2>
        <p className="subtitle">The message is important for startup debugging</p>
      </header>
      <div className="row">
        <p>Open the browser console — the message logs once on mount.</p>
      </div>
    </article>
  );
}
 
export default function App() {
  return (
    <main className="challenge-container">
      <section>
        <DebugMessage />
      </section>
    </main>
  );
}

What To Do

Final View

React: Console message on first render (useEffect)

What To Do

Final View

🧑‍💻 It's not a bug! It's a feature!