VM1550 installHook.js:1860 logging as a double line in the console

Question

I am using a react-app and building a simple application. When I am using the {console.log('')} method to log something on the console, a second log appears on the console and it appears to be coming from a file names {installHook.js} at the line 1860. I have already tried to look for it and I didn't find it. I am curious about why this is happening.

I have already tried to look for it and I didn't find it. I am curious about why this is happening.

Answer 1

Other answers are saying to "delete StrictMode", but not considering what side effects that may have.

StrictMode will help you flush out common bugs caused by impure rendering and effect cleanup.

This comes with noted side effects however:

• Your components will re-render an extra time to find bugs caused by impure rendering.
• Your components will re-run Effects an extra time to find bugs caused by missing Effect cleanup.
• Your components will be checked for usage of deprecated APIs.

The re-render of course is responsible for the duplicated log output.

It should be noted as well that this does not affect production, only development builds

While I couldn't argue the advice to "delete StrictMode" is dangerous, I certainly would argue that it is not the best decision when you want to create a quality application. In my experience, the sooner you enable harsh debug, compile and lint checks the better you will be in the long run. Thinking "oh, we can do that later" leads to a big headache and sometimes insurmountable amounts of refactoring.

Can it be fixed and get StrictMode goodness too?

Yes.

Bobbyhadz mentions that the React DevTools has an option (see below) disable the double rendering of the logs when in StrictMode.

Moral of the story is don't stop wearing a motorcycle helmet just because your head is hot!