loglevel print duplicate log in React component

[rsi-yhe]

Hi, I try to use loglevel in React, and seeing it print duplicate lines.
The project is freshly created with create-react-app and I just added two lines of loglevel.log and console.log in the App.tsx. As you can see in chrome console, console.log printed one time and loglevel.log printed twice.
I'm not sure if this is expected or I'm doing it wrong. Couldn't find any similar topic by just googling.

[pimterry]

I'm not aware of anything that could cause this. It's hard to debug this in more depth without a repro though. Can you share a playground or similar where I can test this behaviour myself?

[rsi-yhe]

https://codesandbox.io/s/empty-sun-5loi1?file=/src/App.js
I put two logs inside App.js and you can see console have 2 output from loglevel

[pimterry]

I can reproduce this, in codesandbox but also locally by exporting that same demo.

Testing it manually with a debugger, in fact it's the console.log that's wrong here - that App() method really is called twice.

It turns out that in React v17 a recent feature hides the output of console.log during a new second rendering pass. That hides the console.log output, but not loglevel's output, which holds a reference to console.log from beforehand.

More detail available in facebook/react#21783. This was fixed (moving the logic to React itself into React devtools, and showing the output but greyed out) in facebook/react#22030, but it sounds like that will only be included in React v18, not v17.

I'm going to close this - loglevel is working correctly, this is a React issue.

[gaearon]

React 18 is out, and double logs are no longer suppressed by default.
(But they're slightly dimmed if you have DevTools installed.)

See facebook/react#21783 (comment).

[pimterry]

Great, thanks for the update @gaearon!