When i write console.log('constructor') in class's constructor, the output duplicates the rendering. code rendering
1
-
1Check your index file and remove StrickModeTony Nguyen– Tony Nguyen2020-06-04 10:55:56 +00:00Commented Jun 4, 2020 at 10:55
Add a comment
|
3 Answers
You can disable doubled comments with React Developer Tools browser extension
Comments
To solve the problem you have to disable the strict react mode in index.js
1 Comment
Ningaro
This issue will help you better understand why this is happening!
If you're on development mode, try disabling "strict mode". On dev mode Reach renders components twice to make dev-only checks and tests to warn you of errors. https://github.com/reactwg/react-18/discussions/96#discussion-3562310
If you're not on dev mode:
This has nothing to do with the console.log duplicating the rendering. It's impossible that it may cause that, because console logging something doesn't affect a component's state, and it won't trigger a new render.
It's normal that components render more than once in a lot of cases
- Do you have any code updating state in your component? Like inside
componentDidMountor anywhere else? - Is a parent of this component updating state anywhere? If so, it will cause itself to re-render, which includes its children re-rendering too.
In short, this is not being caused by your console log. If you remove it you won't "see" the double render because it happens fast and you don't have a point of reference (like a log in your console), but it still happens.
2 Comments
Bony
This is a new App of create-react-app and i inserted into the constructor console.log('constructor'). But i don't know why the output is duplicated
Obed Parlapiano
I recommend you read this it goes over some causes and explanations. If I answered your question, please mark it as accepted 🙏