Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Challenges/components/scene/scene.tsx (TypeScript)

Code before:
import React, { useEffect, useState, useRef } from 'react'; //, ReactElement } from 'react';
import { Col } from '@freecodecamp/ui';
import { FullScene } from '../../../../redux/prop-types';
import { Loader } from '../../../../components/helpers';
import ClosedCaptionsIcon from '../../../../assets/icons/closedcaptions';
import { sounds, images, backgrounds, characterAssets } from './scene-assets';
import Character from './character';

import './scene.css';

export function Scene({ scene }: { scene: FullScene }): JSX.Element {
  const { setup, commands } = scene;
  const { audio, alwaysShowDialogue } = setup;

  const audioTimestamp =
    audio.startTimestamp !== null && audio.finishTimestamp !== null
      ? `#t=${audio.startTimestamp},${audio.finishTimestamp}`
      : '';

  const audioRef = useRef<HTMLAudioElement>(
    new Audio(`${sounds}/${audio.filename}${audioTimestamp}`)
  );

  const loadImage = (src: string) => {
    const img = new Image();
    img.src = src;
  };

  // on mount
  useEffect(() => {
    const { current } = audioRef;
    current.addEventListener('canplaythrough', audioLoaded);

    // preload images
    loadImage(`${backgrounds}/${setup.background}`);

    setup.characters.forEach(character => {
      const characterImages = characterAssets[character.character];
      Object.values(characterImages).forEach(src => {
        if (src) {
          loadImage(src);
        }
      });
    });

    commands.forEach(command => {
      if (command.background) loadImage(`${backgrounds}/${command.background}`);
    });

    // on unmount
    return () => {

Review comment (suggestion):
```suggestion
  const loadImage = (src: string | null) => {
    if (src) new Image().src;
```
It's a little cleaner and lets us tidy up below.

Code after:
import React, { useEffect, useState, useRef } from 'react'; //, ReactElement } from 'react';
import { Col } from '@freecodecamp/ui';
import { FullScene } from '../../../../redux/prop-types';
import { Loader } from '../../../../components/helpers';
import ClosedCaptionsIcon from '../../../../assets/icons/closedcaptions';
import { sounds, images, backgrounds, characterAssets } from './scene-assets';
import Character from './character';

import './scene.css';

export function Scene({ scene }: { scene: FullScene }): JSX.Element {
  const { setup, commands } = scene;
  const { audio, alwaysShowDialogue } = setup;

  const audioTimestamp =
    audio.startTimestamp !== null && audio.finishTimestamp !== null
      ? `#t=${audio.startTimestamp},${audio.finishTimestamp}`
      : '';

  const audioRef = useRef<HTMLAudioElement>(
    new Audio(`${sounds}/${audio.filename}${audioTimestamp}`)
  );

  const loadImage = (src: string | null) => {
    if (src) new Image().src = src;
  };

  // on mount
  useEffect(() => {
    const { current } = audioRef;
    current.addEventListener('canplaythrough', audioLoaded);

    // preload images
    loadImage(`${backgrounds}/${setup.background}`);

    setup.characters
      .map(({ character }) => Object.values(characterAssets[character]))
      .flat()
      .forEach(loadImage);

    commands
      .map(({ background }) =>
        background ? `${backgrounds}/${background}` : null
      )
      .forEach(loadImage);

    // on unmount
    return () => {
      const { current } = audioRef;

      current.pause();