useEffect Hook , API getting called twice

Question

I am working on a Quiz App using React Context API. I used a useEffect hook for fetching quiz question data from an online API while using the start button state as a dependency. However, when I am console logging the extracted object data in Quiz.js, it seems the API is getting called twice despite the fact that I click the "Start Quiz" button only once (turning startQuiz state from false to true). Why is it happening? Also in the console, the logs from the child component (Quiz.js) are appearing first.

Code for App.js (Parent Component) ---->

import Quiz from "./Components/Quiz";
import { DataContext } from "./Context/DataContext";

export default function App() {

  const [startQuiz, setStartQuiz] = useState(false)

  const [quesList,setQuesList] = useState(null)


useEffect(()=> {

    let url = "https://opentdb.com/api.php?amount=5&difficulty=easy&type=multiple"

    fetch(url)
    .then(data => data.json())
    .then(data => { 
        setQuesList(data);
    }).catch(err => console.log(err))

    console.log(quesList)

  },[startQuiz])


  return (
    <div className="App">
      <div className="start-container">

              <h1 className="heading">General Knowledge Quiz</h1>
              <h5 className="sub-heading">Test your overall GK daily with these five questions</h5>
              <button 
                  className="startBttn"
                  onClick={()=> setStartQuiz(!startQuiz)}
                  >Start Quiz</button>
        <DataContext.Provider value={{quesList,setQuesList}}>
              {startQuiz && <Quiz/>}
        </DataContext.Provider>
      </div>
    </div>
  );
};

Code for Quiz.js (Child Component) ---->

import React ,{useContext} from 'react' 
import { DataContext } from '../Context/DataContext'


export default function Quiz() {
   
const {quesList} = useContext(DataContext)

  console.log(quesList)
  const question = quesList.results[0].question;
  console.log(question)
  const correct_answer = quesList.results[0].correct_answer;
  console.log(correct_answer)
  const incorrect_answers = quesList.results[0].incorrect_answers;
  console.log(incorrect_answers)


  return (
    <div>
        <h1>Quiz</h1>
    </div>
  )
}

</code>``` 

**What is the flow of the rendering here? Note: There is no "StrictMode" present in the code ( just found out that it can cause UseEffect to render twice) **

Answer 1

Whenever a state is being changed, your component is being re-rendered. Hence the reason your useEffect is called twice.

I would suggest the following solution:

Wrap your logic with an if statement

useEffect(() => {
  if (startQuiz) {
    let url =
      "https://opentdb.com/api.php?amount=5&difficulty=easy&type=multiple";

    fetch(url)
      .then((data) => data.json())
      .then((data) => {
        setQuesList(data);
      })
      .catch((err) => console.log(err));

    console.log(quesList);
  }
}, [startQuiz]);