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?

[VenkateshDevarakonda0706]

For the first issue, I would investigate whether saveQuizProgress() is returning the expected result during the initial attempt.

The summary is rendered only when both conditions are true:

if (showSummary && quizResults)

In handleFinish() you call:

const results = await saveQuizProgress(...)

setQuizResults(results)
setShowSummary(true)

If results is null, undefined, or has a different shape on the first attempt, showSummary will become true but the component will continue rendering the quiz UI because quizResults is still falsy.

I would add logging for:

console.log('saveQuizProgress result:', results)
console.log('showSummary:', showSummary)
console.log('quizResults:', quizResults)

I would also check whether handleFinish() can be triggered from multiple paths (Finish, handleNext, and handleTimeExpired) which could lead to race conditions around state updates.

Could you share the implementation of saveQuizProgress() and the logs from the first attempt?

[logusivam]

There are a few separate things going on here. The two symptoms are actually linked through how handleFinish and your completion flags interact.

Issue 1 — Finish shows the quiz again on the first attempt, but works on retake

Two root causes combine here:

(a) Your summary render is gated on the return value of an async save.

if (showSummary && quizResults) {
  return <QuizSummary ... />
}

quizResults is only set from await saveQuizProgress(...). So if that call returns undefined/null (or a different shape) on the first run — which is common when the first call inserts a row and a later call reads an existing one — then quizResults stays falsy, showSummary && quizResults is false, and you fall through to re-rendering the quiz UI instead of the summary. On the retake the record already exists, the call returns proper data, and it works. That asymmetry is the tell.

Fix: set showSummary regardless of the save outcome, and never let a falsy result block the summary:

const finishingRef = useRef(false)

const handleFinish = async () => {
  if (finishingRef.current || isQuizCompleted) return
  finishingRef.current = true

  // stop timers immediately so they can't fire mid-finish
  if (timeSpentTimerRef.current) clearInterval(timeSpentTimerRef.current)
  if (questionTimerRef.current) clearInterval(questionTimerRef.current)
  setIsQuizCompleted(true)

  const totalPoints = questions.reduce((sum, q) => sum + q.points, 0)
  try {
    const results = await saveQuizProgress(
      userId, quiz.id, answers, timeSpent, totalPoints, isDailyChallenge
    )
    setQuizResults(results ?? { pointsEarned: 0, totalPoints })
  } catch (error) {
    console.error('Error saving quiz progress:', error)
    setQuizResults({ pointsEarned: 0, totalPoints })
    toast({ title: "Error", description: "Failed to save progress.", variant: "destructive" })
  } finally {
    setShowSummary(true)
    finishingRef.current = false
  }
}

Then relax the guard to if (showSummary) { ... } (and let QuizSummary handle a 0/empty result) so a save hiccup can never silently send the user back into the quiz.

The finishingRef also fixes a real double-finish race: on the last question both the Finish button (onFinish) and handleNext/handleSkip/handleTimeExpired can call handleFinish, and because setIsQuizCompleted(true) is async, two rapid calls both pass the if (isQuizCompleted) return guard. A ref guards synchronously.

(b) handleRetake never resets your completion flags.

const handleRetake = () => {
  setCurrentQuestion(0)
  setAnswers({})
  setIsCorrect(null)
  setTimeSpent(0)
  setTimeRemaining(questions[0]?.timeLimit)
  setShowSummary(false)
  setQuizResults(null)
  setIsQuizCompleted(false)  // <-- was missing
  setIsTimerExpired(false)   // <-- was missing
}

Without these, isQuizCompleted stays true forever after the first run, which keeps your timers permanently disabled and lets the handleFinish early-return fire unexpectedly. This is the main reason first-run vs. retake behave differently.

Issue 2 — constant re-renders from the timer

This part is mostly expected, not a bug: setTimeSpent(prev => prev + 1) runs every second, and any state update re-renders the component. That's one render per second by design.

Moving the timer into a custom hook didn't help because the hook's state still lives in QuizContainer — the changing value is returned to this component, so this component (and its whole subtree) still re-renders each tick. To actually stop the churn, isolate the ticking value in a small leaf component that nothing else depends on:

function ElapsedTime({ running }: { running: boolean }) {
  const [t, setT] = useState(0)
  useEffect(() => {
    if (!running) return
    const id = setInterval(() => setT(p => p + 1), 1000)
    return () => clearInterval(id)
  }, [running])
  return <span>{t}s</span>
}

Now only ElapsedTime re-renders each second, not the entire quiz.

Two more cleanups while you're in there:

• Your question-timer effect lists timeRemaining in its deps, so it tears down and recreates the interval every single second. Drop timeRemaining from the deps and decrement with a functional update inside one stable interval, then watch for expiry in a separate effect keyed on timeRemaining === 0.
• useRef<NodeJS.Timeout>() is fine, but prefer useRef<ReturnType<typeof setInterval>>() for portability.

After (a) + (b), the first-attempt finish should land on the summary reliably. If it still jumps to the first question specifically, share saveQuizProgress's return shape and confirm nothing in the parent remounts QuizContainer (e.g. a changing key), since that's the only other thing that would reset currentQuestion to 0.