Fixing useRef() usage in createElementHook to prevent unnecessary Lea…

…flet object creation (#1014)
PaulLeCam · Aug 14, 2022 · fd9fde6 · fd9fde6
1 parent 5e45d08
commit fd9fde6
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/packages/core/src/element.ts b/packages/core/src/element.ts
@@ -33,17 +33,23 @@ export function createElementHook<E, P, C = any>(
       props: P,
       context: LeafletContextInterface,
     ): ReturnType<ElementHook<E, P>> {
-      return useRef<LeafletElement<E, C>>(createElement(props, context))
+      const elementRef = useRef<LeafletElement<E, C>>() as MutableRefObject<
+        LeafletElement<E>
+      >
+      if (!elementRef.current)
+        elementRef.current = createElement(props, context)
+      return elementRef
     }
   }
 
   return function useMutableLeafletElement(
     props: P,
     context: LeafletContextInterface,
   ): ReturnType<ElementHook<E, P>> {
-    const elementRef = useRef<LeafletElement<E, C>>(
-      createElement(props, context),
-    )
+    const elementRef = useRef<LeafletElement<E, C>>() as MutableRefObject<
+      LeafletElement<E>
+    >
+    if (!elementRef.current) elementRef.current = createElement(props, context)
     const propsRef = useRef<P>(props)
     const { instance } = elementRef.current