Component did Mount is getting called twice?

Question

I am simply calling fetch method inside component did mount and when i console the result it is being printed twice instead of printing it once logically.

hers is the Component Code

import React,{Component} from "react";
import './DealComponent.css';


class DealComponent extends Component {
  constructor(){
    super();
    this.state = {
      photos: []
    }
  }

  componentDidMount(){
    fetch("https://api.thedogapi.com/v1/images/search?size=med&mime_types=jpg&format=json&has_breeds=true&order=RANDOM&page=0&limit=5")
    .then(response=>{
      if(!response.ok){
        throw Error("Error fetching the cute dog");
      }
      return response.json();
    }).then(allData=>{
      console.log(allData);
      this.setState({
        ...this.state,
        photos:allData
      })
    }).catch(err=>{
      throw Error(err.message);
    })
  }

  render(){
    return (
        <div className="Deal-Component">
          <div className="Second-Div">
            <div className="Header-Div">
              <a href="https://www.gopaisa.com/" target="_blank">
                <img className="Logo Logo1" src="https://www.gopaisa.com/images/gopaisa_new_logo.png" alt="Big Fashion Days - Gopaisa Exclusive"/>
              </a>
              <a href="https://play.google.com/store/apps/details?id=com.gopaisa" target="_blank">
                <img src="https://gpcdn.ams3.cdn.digitaloceanspaces.com/categories/Download_Button.png" alt="Big Fashion Days - Gopaisa Exclusive" className="Logo"/>
              </a>
            </div>
            <div className="Body-Container-Div">
              <a href="https://www.gopaisa.com/cosmetics-offers-coupons-sale-deals" target="_blank">
              <img src="https://gpcdn.ams3.cdn.digitaloceanspaces.com/deals/the-great-indian-wedding-sale-29-11-022-0-0.jpg" alt="The Great Indian Wedding Sale" className="Logo"/>
              </a>
              <a href="https://www.gopaisa.com/jewellery-gifts-offers-coupons/malabar-gold-diamonds-jewellery-discount-offer" target="_blank"><img src="https://gpcdn.ams3.cdn.digitaloceanspaces.com/deals/gpwedding-jewellery-landing-page-banner-28112022 (1).png" alt="The Great Indian Wedding Sale" className="Logo"/></a>
              <a href="https://www.gopaisa.com/electronics" target="_blank"><img src="https://gpcdn.ams3.cdn.digitaloceanspaces.com/deals/Slice 3.png" alt="The Great Indian Wedding Sale" className="Logo"/></a>
              <a href="https://www.gopaisa.com/clothing-sale-deals-coupons-offers" target="_blank"><img src="https://gpcdn.ams3.cdn.digitaloceanspaces.com/deals/clothing-nov-29-11-2022.png" alt="The Great Indian Wedding Sale" className="Logo"/></a>
              <a href="https://www.gopaisa.com/travel-offers-deals-coupons" target="_blank"><img src="https://gpcdn.ams3.cdn.digitaloceanspaces.com/deals/Slice 5.png" alt="The Great Indian Wedding Sale" className="Logo"/></a>
              <a href="https://www.gopaisa.com/everyday-electronics-sale-deals-coupons-offers" target="_blank"><img src="https://gpcdn.ams3.cdn.digitaloceanspaces.com/deals/Slice 6.png" alt="The Great Indian Wedding Sale" className="Logo"/></a>
              <a href="https://www.gopaisa.com/mobiles" target="_blank"><img src="https://gpcdn.ams3.cdn.digitaloceanspaces.com/deals/Slice 7.png" alt="The Great Indian Wedding Sale" className="Logo"/></a>
              <a href="https://www.gopaisa.com/Women-Inner-wear-deals-offers" target="_blank"><img src="https://gpcdn.ams3.cdn.digitaloceanspaces.com/deals/Slice 8.png" alt="The Great Indian Wedding Sale" className="Logo"/></a>
            </div>
          </div>
        </div>
    )
  }
}

export default DealComponent ;

i tried to remove setstate() inside of then method of fetch but still the fetch request is being hit twice as it print console statement twice inside devtools console.Any help is greatly appreciated.

[React strict mode](https://reactjs.org/docs/strict-mode.html)? — eroironico, Dec 14 '22 at 12:23
Check your index.js, if strict mode is ON it will call twice https://reactjs.org/docs/strict-mode.html — sojin, Dec 14 '22 at 12:25

score 2 · Accepted Answer · answered Dec 14 '22 at 12:43

2

Remove <React.StrictMode> from index.js

root.render(
 <React.StrictMode>
  <App />
 </React.StrictMode>
);

Your index.js will look like

root.render(
  <App />
 );

answered Dec 14 '22 at 12:43

Poojan3037

310
1
9

1

thanks it worked .Can you also elaborate why was it happening and why removing strict mode helped . – Rohan Sharma Dec 15 '22 at 04:28

Component did Mount is getting called twice?

1 Answers1