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

Code before:
        translationPending
      }
    }
  },
  pageContext: {
    challengeMeta,
    challengeMeta: { isFirstStep, nextChallengePath, prevChallengePath },
    projectPreview: { challengeData, showProjectPreview }
  },
  createFiles,
  cancelTests,
  challengeMounted,
  initConsole,
  initTests,
  updateChallengeMeta,
  openModal,
  setIsAdvancing,
  savedChallenges,
  isChallengeCompleted,
  output,
  executeChallenge,
  previewMounted
}: ShowClassicProps) {
  const { t } = useTranslation();
  const [resizing, setResizing] = useState(false);
  const [prefetched, setPrefetched] = useState(false);
  const [usingKeyboardInTablist, setUsingKeyboardInTablist] = useState(false);
  const containerRef = useRef<HTMLElement>(null);
  const editorRef = useRef<editor.IStandaloneCodeEditor>();
  const instructionsPanelRef = useRef<HTMLDivElement>(null);
  const xtermFitRef = useRef<FitAddon | null>(null);
  const isMobile = useMediaQuery({
    query: `(max-width: ${MAX_MOBILE_WIDTH}px)`
  });

  const blockNameTitle = `${t(
    `intro:${superBlock}.blocks.${block}.title`
  )}: ${title}`;
  const windowTitle = `${blockNameTitle} | freeCodeCamp.org`;
  const showConsole = challengeType === challengeTypes.js;
  // TODO: show preview should NOT be computed like this. That determination is
  // made during the build (at least twice!). It should be either a prop or
  // computed from challengeType
  const showPreview = [
    challengeTypes.html,
    challengeTypes.modern,
    challengeTypes.multifileCertProject,
    challengeTypes.multifilePythonCertProject,
    challengeTypes.python
  ].includes(challengeType);
  const getLayoutState = () => {

Review comment (suggestion):
```suggestion
```
We don't need this if the effect only triggers when `nextChallengePath` changes.

Code after:
        translationPending
      }
    }
  },
  pageContext: {
    challengeMeta,
    challengeMeta: { isFirstStep, nextChallengePath, prevChallengePath },
    projectPreview: { challengeData, showProjectPreview }
  },
  createFiles,
  cancelTests,
  challengeMounted,
  initConsole,
  initTests,
  updateChallengeMeta,
  openModal,
  setIsAdvancing,
  savedChallenges,
  isChallengeCompleted,
  output,
  executeChallenge,
  previewMounted
}: ShowClassicProps) {
  const { t } = useTranslation();
  const [resizing, setResizing] = useState(false);
  const [usingKeyboardInTablist, setUsingKeyboardInTablist] = useState(false);
  const containerRef = useRef<HTMLElement>(null);
  const editorRef = useRef<editor.IStandaloneCodeEditor>();
  const instructionsPanelRef = useRef<HTMLDivElement>(null);
  const xtermFitRef = useRef<FitAddon | null>(null);
  const isMobile = useMediaQuery({
    query: `(max-width: ${MAX_MOBILE_WIDTH}px)`
  });

  const blockNameTitle = `${t(
    `intro:${superBlock}.blocks.${block}.title`
  )}: ${title}`;
  const windowTitle = `${blockNameTitle} | freeCodeCamp.org`;
  const showConsole = challengeType === challengeTypes.js;
  // TODO: show preview should NOT be computed like this. That determination is
  // made during the build (at least twice!). It should be either a prop or
  // computed from challengeType
  const showPreview = [
    challengeTypes.html,
    challengeTypes.modern,
    challengeTypes.multifileCertProject,
    challengeTypes.multifilePythonCertProject,
    challengeTypes.python
  ].includes(challengeType);
  const getLayoutState = () => {
    const reflexLayout = store.get(REFLEX_LAYOUT) as ReflexLayout;