Why useEffect is not listening to changes?

Question

I am having a react-quiz application whose code is:

Quiz.js file:

const Quiz = (props) => {
  const [options,setOptions]=useState();
  const [questions,setQuestions]=useState(props.questions);
  const [currentQuestion,setCurrentQuestion]=useState(0);
   useEffect(()=>{
     console.log(questions);
     var optionss=[];
     optionss.push(questions[currentQuestion].correct_answer);
     questions[currentQuestion].incorrect_answers.forEach((ans)=>optionss.push(ans));
     optionss.sort(()=>Math.random()-0.5);
     setOptions(optionss);
   },[options])
   
  return (
  <div className='quiz'>
    <span className="subtitle">Welcome ,{props.name}</span>
    <div className="questionInfo">
       <span>{questions[currentQuestion].category}</span>
       <span>Score : {props.score}</span> 
    </div>
    <Question 
      questions={questions} 
      setQuestions={setQuestions}
      currentQuestion={currentQuestion} 
      setCurrentQuestion={setCurrentQuestion}
      options={options}
      correctOption={questions[currentQuestion].correct_answer}
      score={props.score}
      setScore={props.setScore} 
    />
  </div>
  );
};

export default Quiz;

Question.js file:

const Question = ({
      questions,
      setQuestions,
      currentQuestion,
      setCurrentQuestion,
      options,
      correctOption,
      score,
      setScore
}) => {
  useEffect(()=>{
 
  },[]);
  console.log(options);
<h1>Question : {currentQuestion+1}</h1>
      <div className="singleQuestion">
        <h2>{questions[currentQuestion].question}</h2>
        <div className="options">
            {options.map((option)=>{
                return(
                    <button 
                     disabled={selected} 
                     key={option} 
                     onClick={()=>{}}
                     className={`singleOption ${selected && handleSelect(option)}`}
                     >{option}</button>
                )
            })}
        </div>
      </div>

App.js file:

import { BrowserRouter,Routes,Route} from 'react-router-dom';
import './App.css';
import Quiz from './components/quiz/quiz';
import axios from "axios"
import {useState} from 'react'
import Home from './components/home/home';
import Header  from './components/header.js';
import Result from './components/result/result';
import Footer from './components/footer';
import { useEffect } from 'react';
function App() {
    const [name,setName]=useState("");
    const [score,setScore]=useState(0);
    const [questions,setQuestions]=useState();
    useEffect(()=>{
      console.log("Questions have changed");
    },[questions]);
    const fetchQuestions=async(category,difficulty)=>{
       const {data}=await axios(`https://opentdb.com/api.php?amount=10&category=${category}&difficulty=${difficulty}&type=multiple`);
       setQuestions(data.results);
    }
    
    
  return (
    <BrowserRouter>
     <div className="App" style={{backgroundImage: "url(./ques1.png)"}}>
      <Header/>
       <Routes>
        <Route path="/home" exact element={<Home name={name} setName={setName} fetchQuestions={fetchQuestions}/>}></Route>
        <Route path="/quiz" exact element={<Quiz name={name} questions={questions} score={score} setScore={setScore} />}></Route>
       </Routes>
      <Footer></Footer>
     </div>
    </BrowserRouter>
  );
}

export default App;

Even though my Quiz component is able to get the questions from the App component,however when I send the question,options to the Question component as props from the Quiz component,I get undefined on logging in the Question component.

Answer 1

UseEffect in Quiz.js file has no dependencies: [] , it will only run once, for first component rendering. Pass there the value that you want to watch for: [options]