diff --git a/src/hooks/useThemePreference.ts b/src/hooks/useThemePreference.ts
index ca585065c4e6..fdee7e147882 100644
--- a/src/hooks/useThemePreference.ts
+++ b/src/hooks/useThemePreference.ts
@@ -1,23 +1,17 @@
-import {useContext, useEffect, useState} from 'react';
+import {useContext, useMemo} from 'react';
 import {useColorScheme} from 'react-native';
 import {PreferredThemeContext} from '@components/OnyxProvider';
-import type {ThemePreferenceWithoutSystem} from '@styles/theme/types';
 import CONST from '@src/CONST';
 
 function useThemePreference() {
-    const [themePreference, setThemePreference] = useState<ThemePreferenceWithoutSystem>(CONST.THEME.FALLBACK);
     const preferredThemeFromStorage = useContext(PreferredThemeContext);
     const systemTheme = useColorScheme();
 
-    useEffect(() => {
+    const themePreference = useMemo(() => {
         const theme = preferredThemeFromStorage ?? CONST.THEME.DEFAULT;
 
-        // If the user chooses to use the device theme settings, we need to set the theme preference to the system theme
-        if (theme === CONST.THEME.SYSTEM) {
-            setThemePreference(systemTheme ?? CONST.THEME.FALLBACK);
-        } else {
-            setThemePreference(theme);
-        }
+        // If the user chooses to use the device theme settings, set the theme preference to the system theme
+        return theme === CONST.THEME.SYSTEM ? systemTheme ?? CONST.THEME.FALLBACK : theme;
     }, [preferredThemeFromStorage, systemTheme]);
 
     return themePreference;