React components rendering twice

So, it is at the end of the day(actually it is 23:23) and I decided to check the performance of my code. Did some console logs to check if my components were rendering unnecessarily. This was what I found:

Hmmm, why was it rendering everything twice? Was it my code I thought.

After I some extensive googling, was sooo glad I found this article:
https://mariosfakiolas.com/blog/my-react-components-render-twice-and-drive-me-crazy/

So, as a summary, the article says the double rendering only takes place in development and not in production and it is mainly because of the React.StrictMode wrapper in index.js.  

To check, I removed the React.StrictMode tag from index.js and wala!:

Did not check rendering during production yet, but I am trusting the author of the articles knows what he is talking about! 😁