React console.log showing duplicate results in Dev Tools

Question

Why does React show duplicate console.log? I found that to remove StrictMode from index.js. but there was no such problem before and why did I remove StrictMode instead of fixing the issue. What other issues could there be?

see the screenshort: https://prnt.sc/HLAmthr9efoB

import React, { useEffect, useState } from "react";
import Country from "../Country/Country.js";

const gridStyle = {
  display: "grid",
  gridTemplateColumns: "repeat(4, 1fr)",
  gridGap: "20px",
};

const Countries = () => {
  const [countries, setCountries] = useState([]);
  useEffect(() => {
    fetch("https://restcountries.com/v3.1/all")
      .then((res) => res.json())
      .then((data) => setCountries(data));
  }, []);
  console.log(countries);
  return (
    <div className="all-countries">
      <p>{countries.length}</p>
      <div style={gridStyle} className="country-container">
        {countries.map((country) => (
          <Country key={Math.random() * 500000} country={country}></Country>
        ))}
      </div>
    </div>
  );
};

export default Countries;

Answer 1

Most probably you write console.log() outside of function that trigger the log,
so will be fired every time the component is re-rendered.