🐛 Fix #98 by loading from localStorage without using an effect

code/frontend/src/hooks/useLocalStorageState.js

@@ -1,17 +1,14 @@
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useState } from "react"
 
 
 /**
  * Hook with the same API as {@link React.useState} which stores its value in the browser's {@link localStorage}.
  */
 export default function useLocalStorageState(key, def) {
-    const [value, setValue] = useState(null);
-
     /**
      * Load the `key` from the {@link localStorage} into `value`, defaulting to `def` if it is not found.
      */
-    const load = useCallback(
-        () => {
+    const load = () => {
         if(localStorage) {
             console.debug(`Loading ${key} from localStorage...`)
             let _value = JSON.parse(localStorage.getItem(key))
@@ -29,9 +26,9 @@ export default function useLocalStorageState(key, def) {
             console.warn(`Can't load value as localStorage doesn't seem to be available, defaulting...`)
             return def
         }
-        },
-        [key, def]
-    )
+    }
+
+    const [value, setValue] = useState(load());
 
     /**
      * Save a value to the {@link localStorage}.
@@ -60,18 +57,5 @@ export default function useLocalStorageState(key, def) {
         [setValue, save]
     )
 
-    /*
-     * When the component first renders, try to load the value from the localStorage.
-     */
-    useEffect(
-        () => {
-            if(!value) {
-                console.debug(`This is the first render, loading ${key} from the localStorage...`)
-                setValue(load())
-            }
-        },
-        [value, setValue, load, key],
-    )
-
     return [value, setAndSave]
 }