diff --git a/web/ui/react-app/src/hooks/useLocalStorage.test.tsx b/web/ui/react-app/src/hooks/useLocalStorage.test.tsx
index 680be7850..5b5542633 100644
--- a/web/ui/react-app/src/hooks/useLocalStorage.test.tsx
+++ b/web/ui/react-app/src/hooks/useLocalStorage.test.tsx
@@ -24,4 +24,18 @@ describe('useLocalStorage', () => {
     expect(result.current[0]).toEqual(newValue);
     expect(localStorage.getItem(key)).toEqual(JSON.stringify(newValue));
   });
+  it('localStorage.getItem calls once', () => {
+    // do not prepare the initial state on every render except the first
+    const spyStorage = jest.spyOn(Storage.prototype, 'getItem') as jest.Mock;
+
+    const key = 'mystorage';
+    const initialState = { a: 1, b: 2 };
+    const { result } = renderHook(() => useLocalStorage(key, initialState));
+    const newValue = { a: 2, b: 5 };
+    act(() => {
+      result.current[1](newValue);
+    });
+    expect(spyStorage).toHaveBeenCalledTimes(1);
+    spyStorage.mockReset();
+  });
 });
diff --git a/web/ui/react-app/src/hooks/useLocalStorage.tsx b/web/ui/react-app/src/hooks/useLocalStorage.tsx
index 75842e769..d321ab805 100644
--- a/web/ui/react-app/src/hooks/useLocalStorage.tsx
+++ b/web/ui/react-app/src/hooks/useLocalStorage.tsx
@@ -1,8 +1,9 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 export function useLocalStorage<S>(localStorageKey: string, initialState: S): [S, Dispatch<SetStateAction<S>>] {
-  const localStorageState = JSON.parse(localStorage.getItem(localStorageKey) || JSON.stringify(initialState));
-  const [value, setValue] = useState(localStorageState);
+  const [value, setValue] = useState(() =>
+    JSON.parse(localStorage.getItem(localStorageKey) || JSON.stringify(initialState))
+  );
 
   useEffect(() => {
     const serializedState = JSON.stringify(value);