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:

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(".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;

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./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;

• javascript
• reactjs
• react-hooks
• jsx
• use-state

• 1 Your ponent might be rendered multiple times. – mc-user Commented May 13, 2022 at 6:40
• 2 Can you please provide some code ? Please check stackoverflow./help/minimal-reproducible-example – RenaudC5 Commented May 13, 2022 at 6:40
• Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented May 13, 2022 at 8:49
• edited the post with codes – Shamim Reza Commented May 13, 2022 at 10:10
• thats mon, react will call your ponent on every render (in development it happens twice for ensuring) thus console.log() will be executed multiple times. – bogdanoff Commented May 13, 2022 at 10:14

2 Answers 2

Regarding the React.StrictMode issue, the solution may be in your ponent, which renders twice and could be wrapped in React.StrictMode. You can either ment out or clean up the React.StrictMode. I hope this fixes the issue.

• In StrictMode, ponents are rendered twice during development (but not in production) to identify issues in your code and provide warnings, which can be very helpful.

• If StrictMode is enabled in your code, it might be due to using create-react-app or similar to create your app initially, which automatically enables StrictMode by default.

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