From a15a0711bc95ea81be8619eded7d23729e8f279a Mon Sep 17 00:00:00 2001
From: Enoch Riese <enoch.riese@gmail.com>
Date: Tue, 7 Jun 2022 12:36:27 -0500
Subject: [PATCH] useRef to track internal ready state for localStorage

---
 .../freesewing.shared/hooks/useLocalStorage.js     | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/freesewing.shared/hooks/useLocalStorage.js b/packages/freesewing.shared/hooks/useLocalStorage.js
index dc41b0f36de..3310d9f1778 100644
--- a/packages/freesewing.shared/hooks/useLocalStorage.js
+++ b/packages/freesewing.shared/hooks/useLocalStorage.js
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 
 // See: https://usehooks.com/useLocalStorage/
 function useLocalStorage(key, initialValue) {
@@ -6,13 +6,16 @@ function useLocalStorage(key, initialValue) {
   const [storedValue, setStoredValue] = useState(initialValue);
   // use this to track whether it's mounted. useful for doing other effects outside this hook
   const [ready, setReady] = useState(false);
+  const readyInternal = useRef(false);
+
+  const setValue = function (value) {
+    if (!readyInternal.current) {
+      return null
+    }
 
-  const setValue = (value) => {
-    if (!ready) return null
     try {
       const valueToStore = value instanceof Function ? value(storedValue) : value
       setStoredValue(valueToStore)
-
       window.localStorage.setItem(prefix + key, JSON.stringify(valueToStore))
     } catch (error) {
       console.log(error)
@@ -21,9 +24,12 @@ function useLocalStorage(key, initialValue) {
 
   // get the item from localstorage after the component has mounted. empty brackets mean it runs one time
   useEffect(() => {
+    readyInternal.current = true;
     const item = window.localStorage.getItem(prefix + key)
     if (item) {
       setValue(JSON.parse(item));
+    } else if (storedValue) {
+      setValue(storedValue)
     }
     setReady(true);
   }, [])