console.log() in React

In React, console.log() sends a value to the browser’s developer console, where you can inspect JavaScript data while debugging. Place it where the value is available: in a component to inspect props or the current render’s state, in an effect to observe committed state, or in an event handler to inspect user input.

What console.log() Does in React

console.log() is a JavaScript method, not a React feature. It writes the arguments you pass to the developer console; it does not display them in the page. Open your browser’s developer tools and select the Console panel to see the messages. A component can render without logging anything, and logs appear only when execution reaches the call.

For a reference to the console API and its methods, see MDN’s console documentation.

Basic JavaScript Console Logging

Call console.log() with a string, number, object, array, or several values. This self-contained JavaScript example sends one greeting string to the developer console, producing the line shown below:

console.log("Hello, React!");

Hello, React!

For example, console.log("user", user) labels an object in the console. Browser consoles format objects for inspection, though the exact display depends on the browser. To style a message, use the console’s %c format specifier, as in console.log("%cImportant", "color: red; font-weight: bold"); %c applies the following style string to the message text. console.important() is not a built-in method, so a custom wrapper would need to define that behavior itself.

Log Component State

In a function component, put console.log(count) in the component body to inspect the count value for that render. The body runs again when React renders the component, so this log can appear many times. Development behavior, including Strict Mode, can also cause additional renders; do not assume one log per user action.

State updates schedule a later render. A log immediately after setCount(count + 1) still reads the count value from the current render. To observe each committed value, place console.log(count) in an effect with [count] as its dependency; that effect also runs after the initial mount. For a transition-specific message, log the event or action that requests the update rather than putting logging side effects inside a state updater.

Inspect Props

Log a prop inside the component that receives it. For example, a child receiving user can call console.log("user prop", user) in its function body. This shows the value supplied for that render and helps trace parent-to-child data flow. Since the component body runs again on renders, the same prop may be logged repeatedly. For nested data, log the specific field you are investigating to make the output easier to scan.

Log Event Data

Put a log in the event handler to inspect data when the user interacts with the page. For an input change handler, console.log(event.currentTarget.value) reads the input’s current value at the time the handler runs. If the handler also updates state, the logged event value is available immediately, while the new state is observed on a later render. Logging in the handler avoids unrelated component renders producing the same message.

Use Logs Safely and Remove Them

Treat logs as temporary debugging aids. Before release, search for and remove logs that are no longer useful, especially messages containing personal data, tokens, or other sensitive values. Production builds do not universally remove console.log() calls; removal depends on the project’s build configuration. Keep intentional operational logging only when it fits the application’s logging policy.

To check a value, log the value at the point where it is available: use the render or an effect for component data, and an event handler for interaction data. For larger debugging sessions, browser breakpoints and React Developer Tools can inspect execution and component data without adding persistent log statements. You can clear the visible browser console with its clear control or by calling console.clear(), but clearing it does not remove logging calls from your code. Review the build configuration if you expect logs to be stripped from a production bundle; otherwise remove temporary calls from the source before release.