Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Challenges/quiz/show.tsx (TypeScript)

Code before:
  },
  pageContext: { challengeMeta },
  initTests,
  updateChallengeMeta,
  openCompletionModal,
  isChallengeCompleted
}: ShowQuizProps) => {
  const { t } = useTranslation();
  const { nextChallengePath, prevChallengePath } = challengeMeta;
  const container = useRef<HTMLElement | null>(null);
  const [errorMessage, setErrorMessage] = useState<string>('');

  // Campers are not allowed to change their answers once the quiz is submitted.
  // `hasSubmitted` is used as a flag to disable the quiz.
  const [hasSubmitted, setHasSubmitted] = useState(false);

  // `isPassed` is used as a flag to conditionally render the test or submit button.
  const [isPassed, setIsPassed] = useState(false);

  const blockNameTitle = `${t(
    `intro:${superBlock}.blocks.${block}.title`
  )} - ${title}`;

  // `random` needs to be a ref object so that it won't change between renders.
  const random = useRef(Math.floor(Math.random() * quizzes.length));
  const quiz = quizzes[random.current].questions;

  // Initialize the data passed to `useQuiz`
  const initialQuizData = quiz.map(question => {
    const distractors = question.distractors.map((distractor, index) => {
      return {
        label: (
          <PrismFormatted className='quiz-answer-label' text={distractor} />
        ),
        value: index + 1
      };
    });

    const answer = {
      label: (
        <PrismFormatted className='quiz-answer-label' text={question.answer} />
      ),
      value: 4
    };

    return {
      question: <PrismFormatted text={question.text} />,
      answers: shuffle([...distractors, answer]),
      correctAnswer: answer.value
    };
  });

Review comment (suggestion):
```suggestion
  const [quizId] = useState(Math.floor(Math.random() * quizzes.length));
  const quiz = quizzes[quizId].questions;
```
State is stable between renders, so we can just pass it a random thing and will never change.

Code after:
  // Campers are not allowed to change their answers once the quiz is submitted.
  // `hasSubmitted` is used as a flag to disable the quiz.
  const [hasSubmitted, setHasSubmitted] = useState(false);

  // `isPassed` is used as a flag to conditionally render the test or submit button.
  const [isPassed, setIsPassed] = useState(false);

  const blockNameTitle = `${t(
    `intro:${superBlock}.blocks.${block}.title`
  )} - ${title}`;

  const [quizId] = useState(Math.floor(Math.random() * quizzes.length));
  const quiz = quizzes[quizId].questions;

  // Initialize the data passed to `useQuiz`
  const [initialQuizData] = useState(
    quiz.map(question => {
      const distractors = question.distractors.map((distractor, index) => {
        return {
          label: (
            <PrismFormatted className='quiz-answer-label' text={distractor} />
          ),
          value: index + 1
        };
      });

      const answer = {
        label: (
          <PrismFormatted
            className='quiz-answer-label'
            text={question.answer}
          />
        ),
        value: 4
      };

      return {
        question: <PrismFormatted text={question.text} />,
        answers: shuffleArray([...distractors, answer]),
        correctAnswer: answer.value
      };
    })
  );

  const {
    questions: quizData,
    validateAnswers,
    correctAnswerCount
  } = useQuiz({
    initialQuestions: initialQuizData,
    validationMessages: {