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.
I had the same issue. If you comment out the React.StrictMode the line will be gone.
Other answers are saying to "delete StrictMode", but not even 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.
Ok, enough lecturing from the old man... 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.
Morale of the story is... Don't stop wearing a motorcycle helmet just because your head is hot!!
Hope this advice helps someone, have a great day!
