why one console log from one line appears 6 times from initial render?

Question

I am just learning React and encountered a thing I can't find explanation for. I do know that using React strict mode makes console-logs double. But why 6 times is a mystery to me. Here is when I encountered it first which a typical set up for a fetch function example is here And I am also not sure how it impacts the performance of the app when such thing happen. Is it harmful when the app does that? Or is this effect somehow related to fetching data only and is a norm?

Answer 1

1. First log is because component is mounted.
2. Second log is because of state change: setProducts(products)
3. Third log is because of state change: setLoading(false)

In StrictMode are components rendered twice. 2 x 3 = 6 console.logs