refactor: Optimize GameMusic component for better performance

The GameMusic component has been refactored to improve performance. Instead of rendering the GameAudio component conditionally within a fragment, it now directly returns the GameAudio component if the 'music' prop is truthy, and returns null otherwise. This change reduces unnecessary rendering and improves the efficiency of the component.
reactgular · Jun 1, 2024 · 025bb50 · 025bb50
1 parent fd01b93
commit 025bb50
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 22 deletions.
diff --git a/src/components/molecules/game/GameMusic.tsx b/src/components/molecules/game/GameMusic.tsx
@@ -8,15 +8,11 @@ export const GameMusic: FC = () => {
     const music = useSelector(AppSelectors.music);
     const musicVolume = useSelector(AppSelectors.musicVolume);
     const musicType = useSelector(AppSelectors.musicType);
-    return (
-        <>
-            {music && (
-                <GameAudio
-                    src={AUDIO_FILES[musicType]}
-                    volume={musicVolume / 100}
-                    loop={true}
-                />
-            )}
-        </>
-    );
+    return music ? (
+        <GameAudio
+            src={AUDIO_FILES[musicType]}
+            volume={musicVolume / 100}
+            loop={true}
+        />
+    ) : null;
 };
diff --git a/src/components/particles/audio.types.tsx b/src/components/particles/audio.types.tsx
@@ -1,21 +1,20 @@
 import {ReactElement} from 'react';
 import {FaMusic, FaVolumeMute, FaVolumeUp} from 'react-icons/fa';
-import {environment} from '../../environment/environment';
 import {UiOption} from './ui/UiSelect';
 
 export const AUDIO_FILES = [
-    `${environment.base}audio/music/bonkers-for-arcades.mp3`,
-    `${environment.base}audio/music/the-ice-cream-man.mp3`,
-    `${environment.base}audio/music/8-bit-perplexion.mp3`,
-    `${environment.base}audio/music/its-raining-pixels.mp3`,
-    `${environment.base}audio/music/arcade-puzzler.mp3`
+    'audio/music/bonkers-for-arcades.mp3',
+    'audio/music/the-ice-cream-man.mp3',
+    'audio/music/8-bit-perplexion.mp3',
+    'audio/music/its-raining-pixels.mp3',
+    'audio/music/arcade-puzzler.mp3'
 ];
 
-export const SOUND_FINISHED = `${environment.base}audio/sounds/power-down-13.mp3`;
-export const SOUND_LEVEL = `${environment.base}audio/sounds/retro-chip-power.mp3`;
-export const SOUND_SCORE = `${environment.base}audio/sounds/ui-quirky-19.mp3`;
-export const SOUND_DROP = `${environment.base}audio/sounds/zapsplat_bambo_swoosh.mp3`;
-export const SOUND_LEVEL_10 = `${environment.base}audio/sounds/zapsplat_level_up.mp3`;
+export const SOUND_FINISHED = 'audio/sounds/power-down-13.mp3';
+export const SOUND_LEVEL = 'audio/sounds/retro-chip-power.mp3';
+export const SOUND_SCORE = 'audio/sounds/ui-quirky-19.mp3';
+export const SOUND_DROP = 'audio/sounds/zapsplat_bambo_swoosh.mp3';
+export const SOUND_LEVEL_10 = 'audio/sounds/zapsplat_level_up.mp3';
 
 export const PRELOAD_AUDIO = [
     SOUND_FINISHED,

diff --git a/src/environment/environment.ts b/src/environment/environment.ts
@@ -3,6 +3,9 @@ const endsInSlash = (str: string): string => str.endsWith('/') ? str : `${str}/`
 export interface Environment {
     analytics: string;
 
+    /**
+     * @deprecated use basePath from router instead
+     */
     base: string;
 
     brandName: string;