useState->useRef

Signed-off-by: Timo K <toger5@hotmail.de>

src/useTheme.ts

@@ -14,22 +14,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useLayoutEffect, useState } from "react";
+import { useLayoutEffect, useRef } from "react";
 
 import { useUrlParams } from "./UrlParams";
 
 export const useTheme = (): void => {
   const { theme: themeName } = useUrlParams();
-  const [previousTheme, setPreviousTheme] = useState<string | null>(
-    document.body.classList.item(0),
-  );
+  const previousTheme = useRef<string | null>(document.body.classList.item(0));
   useLayoutEffect(() => {
     // Don't update the current theme if the url does not contain a theme prop.
     if (!themeName) return;
     const theme = themeName.includes("light") ? "light" : "dark";
     const themeHighContrast = themeName.includes("high-contrast") ? "-hc" : "";
     const themeString = "cpd-theme-" + theme + themeHighContrast;
-    if (themeString !== previousTheme) {
+    if (themeString !== previousTheme.current) {
       document.body.classList.remove(
         "cpd-theme-light",
         "cpd-theme-dark",
@@ -37,7 +35,7 @@ export const useTheme = (): void => {
         "cpd-theme-dark-hc",
       );
       document.body.classList.add(themeString);
-      setPreviousTheme(themeString);
+      previousTheme.current = themeString;
     }
   }, [previousTheme, themeName]);
 };