Fix performance issues with settings map name change

src/components/map/MapSettings.js

@@ -1,8 +1,11 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Flex, Box, Label, Input, Checkbox, IconButton } from "theme-ui";
 
 import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
 
+import useDebounce from "../../helpers/useDebounce";
+import usePrevious from "../../helpers/usePrevious";
+
 function MapSettings({
   map,
   mapState,
@@ -21,6 +24,24 @@ function MapSettings({
       );
     }
   }
+
+  // Create a local state for the map name to debounce calls to settings change
+  // and avoid performance issues with db access
+  const [localMapName, setLocalMapName] = useState("");
+  const prevMap = usePrevious(map);
+  useEffect(() => {
+    // Check map changed
+    if (map && (!prevMap || map.id !== prevMap.id)) {
+      setLocalMapName(map.name);
+    }
+  }, [map]);
+  const debouncedLocalMapName = useDebounce(localMapName, 100);
+  useEffect(() => {
+    if (map) {
+      onSettingsChange("name", debouncedLocalMapName);
+    }
+  }, [debouncedLocalMapName]);
+
   return (
     <Flex sx={{ flexDirection: "column" }}>
       <Flex>
@@ -94,8 +115,8 @@ function MapSettings({
             <Label htmlFor="name">Name</Label>
             <Input
               name="name"
-              value={(map && map.name) || ""}
-              onChange={(e) => onSettingsChange("name", e.target.value)}
+              value={localMapName}
+              onChange={(e) => setLocalMapName(e.target.value)}
               disabled={map === null || map.type === "default"}
               my={1}
             />