State Not Captured Properly and Timer Causing Re-renders in Next.js App

[kamal-sharma-de]

Summary

So basically I am facing two issues with this piece of code.

1. Finish Button Behavior: When the user clicks on the "Finish" button (handleFinish) for the first time, they are redirected to the start of the same page instead of the summary page. However, in the case of a retake, clicking on the "Finish" button correctly displays the summary page. It seems the issue is related to the state not being properly captured or updated during the initial attempt, but I'm unable to pinpoint the exact problem.

2. Constant Re-renders: The page is undergoing constant re-renders, which is evident from the console logs, even though there is no user interaction on the page. I suspect this is related to the running timer. I tried moving the timer logic to a custom hook to prevent re-renders, but that didn’t resolve the issue. While this behavior isn’t visible to a normal user, it is noticeable in the console logs.

I am using NextJs 14.2. Could you please help me with this issue?

'use client'

interface QuizContainerProps {
  quiz: Quiz
  questions: QuizQuestion[]
  userId: string
  isDailyChallenge?: boolean
  pointsMultiplier?: number
}

export function QuizContainer({ 
  quiz, 
  questions, 
  userId,
  isDailyChallenge = false,
  pointsMultiplier = 1
}: QuizContainerProps) {
  console.log('Rendering QuizContainer:', { 
    quizId: quiz.id, 
    questionCount: questions.length,
    isDailyChallenge,
    pointsMultiplier
  })

  const { toast } = useToast()
  const [currentQuestion, setCurrentQuestion] = useState<number>(0)
  const [answers, setAnswers] = useState<Record<number, string>>({})
  const [isCorrect, setIsCorrect] = useState<boolean | null>(null)
  const [timeSpent, setTimeSpent] = useState<number>(0)
  const [timeRemaining, setTimeRemaining] = useState<number | undefined>(
    questions[0]?.timeLimit
  )
  const [showSummary, setShowSummary] = useState(false)
  const [quizResults, setQuizResults] = useState<{
    pointsEarned: number
    totalPoints: number
  } | null>(null)
  const [isTimerExpired, setIsTimerExpired] = useState(false)
  const [isQuizCompleted, setIsQuizCompleted] = useState(false)

  const timeSpentTimerRef = useRef<NodeJS.Timeout>()
  const questionTimerRef = useRef<NodeJS.Timeout>()

  // Timer for total time spent
  useEffect(() => {
    if (!isQuizCompleted) {
      timeSpentTimerRef.current = setInterval(() => {
        setTimeSpent(prev => prev + 1)
      }, 1000)
    }
    return () => {
      if (timeSpentTimerRef.current) {
        clearInterval(timeSpentTimerRef.current)
      }
    }
  }, [isQuizCompleted])

  // Timer for question time limit
  useEffect(() => {
    if (!isQuizCompleted && timeRemaining && timeRemaining > 0) {
      questionTimerRef.current = setInterval(() => {
        setTimeRemaining(prev => {
          if (prev && prev > 0) {
            return prev - 1
          }
          return 0
        })
      }, 1000)
    } else if (timeRemaining === 0 && !isTimerExpired && !isQuizCompleted) {
      handleTimeExpired()
    }

    return () => {
      if (questionTimerRef.current) {
        clearInterval(questionTimerRef.current)
      }
    }
  }, [timeRemaining, isQuizCompleted])

  const handleTimeExpired = async () => {
    if (isQuizCompleted) return
    
    console.log('Timer expired for question:', currentQuestion)
    setIsTimerExpired(true)

    toast({
      title: "Time's Up!",
      description: "Moving to the next question...",
      variant: "destructive",
    })

    await new Promise(resolve => setTimeout(resolve, 1500))

    if (currentQuestion === questions.length - 1) {
      handleFinish()
    } else {
      handleNext()
    }
    setIsTimerExpired(false)
  }

  const handleAnswerSelect = async (answerId: string) => {
    if (isTimerExpired || timeRemaining === 0) return
    
    console.log('Selected answer:', answerId)
    const questionId = questions[currentQuestion].id
    setAnswers(prev => ({ ...prev, [questionId]: answerId }))
    setIsCorrect(answerId === questions[currentQuestion].correctAnswer)
  }

  const handleFinish = async () => {
    if (isQuizCompleted) return
    
    console.log('Finishing quiz...')
    try {
      const totalPoints = questions.reduce((sum, q) => sum + q.points, 0)
      const results = await saveQuizProgress(
        userId,
        quiz.id,
        answers,
        timeSpent,
        totalPoints,
        isDailyChallenge
      )

      console.log('Quiz results:', results)
      setQuizResults(results)
      setShowSummary(true)
      setIsQuizCompleted(true)

      if (timeSpentTimerRef.current) clearInterval(timeSpentTimerRef.current)
      if (questionTimerRef.current) clearInterval(questionTimerRef.current)
    } catch (error) {
      console.error('Error saving quiz progress:', error)
      toast({
        title: "Error",
        description: "Failed to save quiz progress. Please try again.",
        variant: "destructive",
      })
    }
  }

  const handleNext = () => {
    if (currentQuestion === questions.length - 1) {
      handleFinish()
      return
    }

    setCurrentQuestion(prev => prev + 1)
    setIsCorrect(null)
    setTimeRemaining(questions[currentQuestion + 1]?.timeLimit)
    setIsTimerExpired(false)
  }

  const handleRetake = () => {
    console.log('Retaking quiz')
    setCurrentQuestion(0)
    setAnswers({})
    setIsCorrect(null)
    setTimeSpent(0)
    setTimeRemaining(questions[0]?.timeLimit)
    setShowSummary(false)
    setQuizResults(null)
  }

  const handleSkip = () => {
    if (currentQuestion === questions.length - 1) {
      handleFinish()
      return
    }

    setCurrentQuestion(prev => prev + 1)
    setIsCorrect(null)
    setTimeRemaining(questions[currentQuestion + 1]?.timeLimit)
  }

  const handlePrevious = () => {
    if (currentQuestion > 0) {
      setCurrentQuestion(prev => prev - 1)
      setIsCorrect(null)
      setTimeRemaining(questions[currentQuestion - 1]?.timeLimit)
    }
  }

  console.log("Showing Results:....", showSummary, quizResults)
  if (showSummary && quizResults) {
    return (
      <QuizSummary
        questions={questions}
        answers={answers}
        pointsEarned={quizResults.pointsEarned}
        totalPoints={quizResults.totalPoints}
        onRetake={handleRetake}
        isDailyChallenge={isDailyChallenge}
        pointsMultiplier={pointsMultiplier}
      />
    )
  }

  return (
    <div className="max-w-3xl mx-auto space-y-6">
      <QuizHeader 
        title={questions[currentQuestion].text}
        questionNumber={currentQuestion + 1}
        totalQuestions={questions.length}
        timeRemaining={timeRemaining}
        isExpired={isTimerExpired}
      />
      
      <QuizProgress 
        current={currentQuestion + 1}
        total={questions.length}
        answeredQuestions={Object.keys(answers).length}
      />

      <QuizContent 
        question={questions[currentQuestion]}
        selectedAnswer={answers[questions[currentQuestion].id] || null}
        isCorrect={isCorrect}
        onAnswerSelect={handleAnswerSelect}
        onSkip={handleSkip}
        isDisabled={isTimerExpired || timeRemaining === 0}
      />

      <QuizNavigation 
        currentQuestion={currentQuestion}
        totalQuestions={questions.length}
        onNext={handleNext}
        onPrevious={handlePrevious}
        onFinish={handleFinish}
        canProceed={answers[questions[currentQuestion].id] !== undefined || timeRemaining === 0}
        isLastQuestion={currentQuestion === questions.length - 1}
      />
    </div>
  )
} 

Additional information

No response

Example

No response

[icyJoseph]

I am not sure about point 1, yet, maybe it is missing some more info.

Regarding point 2, that's to be expected. Moving it into a custom hook won't do anything either, it is as good as being inlined.

• https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/#standard-render-behavior

The, so called, standard rendering behavior is to re-render a React tree, from the component where state is set. In this case, setTimeSpent, causes this.

People usually use this as workshop/demo material, showing how, one has to collocate state, where it is needed.

• https://github.com/icyJoseph/react-zero-to-beginner/blob/main/05-using-react/src/App.tsx

See in that example, there's a number calculation going on, but also, it shows ticking time, and mouse position. That makes the number calculation re-run every second, and every time the mouse moves. The solution in that case, is to notice that these are independent pieces of state, and collocate them with the UI that uses them, further down in the React tree.

For your case, though, you want to know the time since the user starts, so why not just store the start time? And then onFinish, or whichever method, do a Date.now () - startTime, and then you know the time spent on the quiz?