Use initializer function for useState hook in useStorage

wwWallet · Sep 22, 2023 · d716d2d · d716d2d
1 parent f7aa8d7
commit d716d2d
Showing 1 changed file with 13 additions and 10 deletions.
diff --git a/src/components/useStorage.ts b/src/components/useStorage.ts
@@ -46,17 +46,20 @@ function makeUseStorage<T>(
 	}
 
 	return (name: string, initialValue: T) => {
-		const storedValueStr = storage.getItem(name);
-		let storedValue = initialValue;
-		try {
-			if (storedValueStr !== null) {
-				storedValue = jsonParseTaggedBinary(storedValueStr);
+		const [currentValue, setValue] = useState(
+			() => {
+				const storedValueStr = storage.getItem(name);
+				try {
+					if (storedValueStr !== null) {
+						return jsonParseTaggedBinary(storedValueStr);
+					}
+				} catch (e) {
+					// Fall back to initialValue
+					storage.removeItem(name);
+				}
+				return initialValue;
 			}
-		} catch (e) {
-			// Fall back to initialValue
-			storage.removeItem(name);
-		}
-		const [currentValue, setValue] = useState(storedValue);
+		);
 
 		// Browser storage is global state, so update all useState hooks with the
 		// same name whenever one of them changes. The storage event is not fired