Fixed save frequency, projects now save on an interval of 15 seconds instead of after every state change. Should provide a solid performance boost and limit server requests.

Co-authored-by: jonocr <[email protected]>
Co-authored-by: buddhajjigae <[email protected]>
Co-authored-by: xkevinpark <[email protected]>
Co-authored-by: williamdyoon <[email protected]>

Author: 5 people

app/src/components/App.tsx

@@ -57,7 +57,24 @@ export const App = (): JSX.Element => {
     }
   }, []);
 
-  useEffect(() => {
+  // Caret this useEffect was triggering a save after every state change, which is bad for performance
+  // useEffect(() => {
+  //   let userId;
+  //   if (Cookies.get('ssid')) {
+  //     userId = Cookies.get('ssid');
+  //   } else {
+  //     userId = window.localStorage.getItem('ssid');
+  //   }
+  //   if (state.isLoggedIn === false) {
+  //     localforage.setItem('guestProject', state);
+  //   } else if (state.name !== '') {
+  //     saveProject(state.name, state);
+  //     localforage.setItem(userId, state);
+  //   }
+  // }, [state]);
+
+  // Caret setInterval alternative for 15 seconds between saves
+  setInterval(() => {
     let userId;
     if (Cookies.get('ssid')) {
       userId = Cookies.get('ssid');
@@ -70,7 +87,7 @@ export const App = (): JSX.Element => {
       saveProject(state.name, state);
       localforage.setItem(userId, state);
     }
-  }, [state]);
+  }, 15000)
 
   return (
     <div className="app">