From 441caabd3050b8c653a5f4970fe96e91e5ecf6f6 Mon Sep 17 00:00:00 2001
From: "S. Andrew Sheppard" <andrew@wq.io>
Date: Wed, 4 Oct 2023 15:08:49 -0400
Subject: [PATCH] various optimizations & fixes

 - memoize useRouteTitle()
 - fix type of default 404 template name
 - fix Geo & Draw state issues
---
 packages/map-gl-web/src/overlays/Draw.js |  3 +--
 packages/map/src/inputs/Geo.js           |  2 +-
 packages/react/src/hooks.js              | 25 +++++++++++++-----------
 packages/router/src/router.js            |  2 +-
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/map-gl-web/src/overlays/Draw.js b/packages/map-gl-web/src/overlays/Draw.js
index 367ffc49..cc35a380 100644
--- a/packages/map-gl-web/src/overlays/Draw.js
+++ b/packages/map-gl-web/src/overlays/Draw.js
@@ -14,7 +14,7 @@ export default function Draw({ type, required, data, setData }) {
         controls.trash = true;
     }
     const draw = useControl(
-        (props) => {
+        () => {
             const { classes } = MapboxDraw.constants;
             for (const [key, value] of Object.entries(classes)) {
                 if (value.startsWith("mapboxgl-")) {
@@ -22,7 +22,6 @@ export default function Draw({ type, required, data, setData }) {
                 }
             }
             return new MapboxDraw({
-                ...props,
                 displayControlsDefault: false,
                 controls,
             });
diff --git a/packages/map/src/inputs/Geo.js b/packages/map/src/inputs/Geo.js
index 703c436e..8474bde0 100644
--- a/packages/map/src/inputs/Geo.js
+++ b/packages/map/src/inputs/Geo.js
@@ -12,7 +12,7 @@ import PropTypes from "prop-types";
 export default function Geo({
     name,
     type,
-    mapId = null,
+    mapId = undefined,
     required,
     label,
     hint,
diff --git a/packages/react/src/hooks.js b/packages/react/src/hooks.js
index 16858d5d..eaff2695 100644
--- a/packages/react/src/hooks.js
+++ b/packages/react/src/hooks.js
@@ -98,17 +98,20 @@ export function useRouteTitle(routeName) {
         { getRouteTitle } = app.router,
         config = useConfig();
 
-    function routeTitle(routeName) {
-        const [name, mode, variant] = app.splitRoute(routeName);
-        const page_config = config.pages[name] || {
-            name,
-        };
-        return getRouteTitle({
-            page_config,
-            mode,
-            variant,
-        });
-    }
+    const routeTitle = useCallback(
+        (routeName) => {
+            const [name, mode, variant] = app.splitRoute(routeName);
+            const page_config = config.pages[name] || {
+                name,
+            };
+            return getRouteTitle({
+                page_config,
+                mode,
+                variant,
+            });
+        },
+        [app, routeName, config]
+    );
 
     if (routeName) {
         return routeTitle(routeName);
diff --git a/packages/router/src/router.js b/packages/router/src/router.js
index 9d1f7565..70d55a6b 100644
--- a/packages/router/src/router.js
+++ b/packages/router/src/router.js
@@ -30,7 +30,7 @@ const defaultQuerySerializer = {
 var router = {
     config: {
         store: "main",
-        tmpl404: 404,
+        tmpl404: "404",
         debug: false,
         getTemplateName: (name) => name,
         querySerializer: defaultQuerySerializer,