From 42988939608ea298622f06f0b0cfad7bfd5c0bd4 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 2 Sep 2023 11:33:57 +0200
Subject: [PATCH] Improve useEffect usage in App component, to have the right
 dependencies

---
 src/app/App.tsx                        | 12 ++++++++----
 src/settings/UserInterfaceSettings.tsx |  4 +---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index b27811a7..bb9d4022 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,7 +1,7 @@
 import { changeThemeInMarkup } from '@shlinkio/shlink-frontend-kit';
 import classNames from 'classnames';
 import type { FC } from 'react';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { AppUpdateBanner } from '../common/AppUpdateBanner';
 import { NotFound } from '../common/NotFound';
@@ -29,16 +29,20 @@ export const App = (
   ShlinkVersionsContainer: FC,
 ) => ({ fetchServers, servers, settings, appUpdated, resetAppUpdate }: AppProps) => {
   const location = useLocation();
+  const initialServers = useRef(servers);
   const isHome = location.pathname === '/';
 
   useEffect(() => {
-    // On first load, try to fetch the remote servers if the list is empty
-    if (Object.keys(servers).length === 0) {
+    // Try to fetch the remote servers if the list is empty at first
+    // We use a ref because we don't care if the servers list becomes empty later
+    if (Object.keys(initialServers.current).length === 0) {
       fetchServers();
     }
+  }, [fetchServers]);
 
+  useEffect(() => {
     changeThemeInMarkup(settings.ui?.theme ?? 'light');
-  }, []);
+  }, [settings.ui?.theme]);
 
   return (
     <div className="container-fluid app-container">
diff --git a/src/settings/UserInterfaceSettings.tsx b/src/settings/UserInterfaceSettings.tsx
index 58f2a086..01d8d29e 100644
--- a/src/settings/UserInterfaceSettings.tsx
+++ b/src/settings/UserInterfaceSettings.tsx
@@ -1,7 +1,7 @@
 import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { Theme } from '@shlinkio/shlink-frontend-kit';
-import { changeThemeInMarkup, SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
+import { SimpleCard, ToggleSwitch } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import type { AppSettings, UiSettings } from './reducers/settings';
 import './UserInterfaceSettings.scss';
@@ -18,9 +18,7 @@ export const UserInterfaceSettings: FC<UserInterfaceProps> = ({ settings: { ui }
       checked={ui?.theme === 'dark'}
       onChange={(useDarkTheme) => {
         const theme: Theme = useDarkTheme ? 'dark' : 'light';
-
         setUiSettings({ ...ui, theme });
-        changeThemeInMarkup(theme);
       }}
     >
       Use dark theme.