Hey guys, really curious here why my App.js runs 4 times.
I think it should run twice when the app first loads and when the app makes an api call during useEffect (componentDidMount). But looks like it’s running 4 times if you check the console.
Here is my app. Any help would be appreciated!
https://chuck-norris-says.netlify.com/
Here is my code
import React, { useState, useEffect, Fragment } from 'react'
import axios from 'axios'
import AppStyle from './App.module.scss'
import Header from './components/Header/Header'
import QuoteBox from './components/QuoteBox/QuoteBox'
import InfoBox from './components/InfoBox/InfoBox'
const App = () => {
console.log("APP")
const [quote, setQuote] = useState('')
const [loading, setLoading] = useState(false)
const [isExplicit, toggleExplicit] = useState(false)
useEffect(() => {
fetchQuote()
}, [])
const fetchQuote = async () => {
setLoading(true)
try {
show original
Oops sorry It was because my loading state was changing.