From d9bbdc77f89d7b6a0f450811afbd201276ecc2b4 Mon Sep 17 00:00:00 2001
From: dklw000 <dklw000@gmail.com>
Date: Thu, 18 Sep 2025 14:02:04 -0700
Subject: [PATCH] Selection.tsx Recurses Infinitely #330 - cause: react 19
 surfaces an existing issue where Select is reactively consuming an api that
 it also pushes updates to

---
 src/Selection.tsx | 34 +++++++++++++++++++++++++++-------
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/Selection.tsx b/src/Selection.tsx
index 5e3ae36..d5ac350 100644
--- a/src/Selection.tsx
+++ b/src/Selection.tsx
@@ -12,22 +12,42 @@ export type SelectApi = Omit<ThreeElements['group'], 'ref'> & {
 }
 
 export const selectionContext = /* @__PURE__ */ createContext<Api | null>(null)
+export const selectContext = /* @__PURE__ */ createContext<Api | null>(null)
 
-export function Selection({ children, enabled = true }: { enabled?: boolean; children: React.ReactNode }) {
+export function Selection(
+  { children, enabled = true }: { enabled?: boolean; children: React.ReactNode }
+) {
   const [selected, select] = useState<THREE.Object3D[]>([])
-  const value = useMemo(() => ({ selected, select, enabled }), [selected, select, enabled])
-  return <selectionContext.Provider value={value}>{children}</selectionContext.Provider>
+  const selectApiRef = useRef({ selected, select, enabled })
+  const selectApi = selectApiRef.current
+
+  //non-reactive api for selectContext
+  selectApi.selected = selected
+  selectApi.select = select
+  selectApi.enabled = enabled
+
+  const selectionApi = useMemo(() => ({ selected, select, enabled }), [selected, select, enabled])
+
+  return (
+    <selectContext.Provider value={selectApiRef.current}>
+      <selectionContext.Provider value={selectionApi}>
+        {children}
+      </selectionContext.Provider>
+    </selectContext.Provider>
+  )
 }
 
 export function Select({ enabled = false, children, ...props }: SelectApi) {
   const group = useRef<THREE.Group>(null!)
-  const api = useContext(selectionContext)
+  const api = useContext(selectContext)
   useEffect(() => {
     if (api && enabled) {
       let changed = false
       const current: THREE.Object3D[] = []
       group.current.traverse((o) => {
-        o.type === 'Mesh' && current.push(o)
+        if (o.type === 'Mesh') {
+          current.push(o)
+        }
         if (api.selected.indexOf(o) === -1) changed = true
       })
       if (changed) {
@@ -37,10 +57,10 @@ export function Select({ enabled = false, children, ...props }: SelectApi) {
         }
       }
     }
-  }, [enabled, children, api])
+  }, [enabled, children, api]);
   return (
     <group ref={group} {...props}>
       {children}
     </group>
   )
-}
+}
\ No newline at end of file