How to Debug in React Using the console.log() Method

1. Console Logging in React
2. Console Logging in Functional Components in React
3. Console Logging in Class Components in React

Modern web applications are usually the result of collaboration between people with different skills. The complexity of projects leaves a lot of room for mistakes, so companies invest in debugging and testing tools to find and resolve the bugs in their code.

If your team is building a web application in React, there are multiple tools you can use to debug your code. However, none are as simple as the console.log() method.

Console Logging in React

The console.log() allows you to display values (or the result of expressions that return values) from your application to the console. It allows you to check the value of JavaScript expressions at different stages of the web application.

For instance, if you use the componentDidMount() lifecycle method in React to load external data, you can use console.log() to check whether or not the data was loaded successfully. It can have many other uses as well.

The best part about the console.log() method is that it’s a part of the native JavaScript API. You don’t need to install any external packages to use them in your applications.

However, you must remember that even though the console.log() method is useful for debugging, calls to this method add no specific value or functionality to your app. It’s recommended to remove console.log() calls once you’re done debugging the code.

Console Logging in Functional Components in React

Since React version 16.8, more developers have started using functional components. Structurally, these components are just straightforward functions that return the JSX code.

You can use console.log() in React functional components, but it is usually outside the JSX code. Let’s take a look at one example.

export default function App() {
  console.log("hello world");
  return (
    <div className="App">
      <h1>a simple app</h1>
    </div>
  );
}

The console.log() method is called before the return statement in the main function scope. This way, the string "hello world" is logged to the console every time the component is rendered.

It’s also possible to use the console.log() method within JSX. According to JSX rules, wrapping JavaScript code with curly braces is necessary.

For instance, we could have a button with an event handler that calls the console.log() method. Let’s consider this example.

export default function App() {
  console.log("hello world");
  return (
    <div className="App">
      <button onClick={() => console.log("button clicked")}>Console Log</button>
    </div>
  );
}

If you look at the live demo on CodeSandbox, you’ll see that clicking the button does log the text "button clicked" to the console.

Alternatively, you can call the console.log() method within the useEffect() hook, replacing class components’ lifecycle hooks with functional components. Here is a very basic example using this hook.

useEffect(() => console.log("mounted"));

The useEffect() hook takes multiple arguments, but it needs at least one argument - a callback function that will get called once the component is mounted. You can also add another argument, an array of dependencies, which will list the state variables.

The changes to these state variables will trigger the execution of the callback function. We don’t have an array, so the function argument gets called just once.

Console Logging in Class Components in React

To use the console.log() method in class components, React developers must follow the same principles as in functional components, with few key differences. The first difference is that we use lifecycle hooks in class components, such as componentDidMount(), componentDidUpdate(), and others.

For instance, the useEffect() hook example above would look like this in class components.

componentDidMount(){
    console.log("mounted")
}

The second difference is that class components also have a render() method. It contains a return statement.

Similarly to functional components, you should call the console.log() method within the scope of the render function but before the return statement.