From fd9fde6bd60f808ed96e452c4eb6e0b70a852d06 Mon Sep 17 00:00:00 2001
From: abac <serge@web2039.com>
Date: Sun, 14 Aug 2022 13:54:25 +0300
Subject: [PATCH] Fixing useRef() usage in createElementHook to prevent
 unnecessary Leaflet object creation (#1014)

---
 packages/core/src/element.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/element.ts b/packages/core/src/element.ts
index 66cbcbb5..e72b5c2b 100644
--- a/packages/core/src/element.ts
+++ b/packages/core/src/element.ts
@@ -33,7 +33,12 @@ 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
     }
   }
 
@@ -41,9 +46,10 @@ export function createElementHook<E, P, C = any>(
     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