diff --git a/CHANGELOG.md b/CHANGELOG.md index 4c7a5dc..35e0d10 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # react-three-map +## 1.0.9 + +### Patch Changes + +- Move coord store updates into effects to stop setState during render warnings (InitR3M/AxisArrow). + ## 1.0.8 ### Patch Changes diff --git a/package-lock.json b/package-lock.json index e3d356c..f707ee2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@wendylabsinc/react-three-map", - "version": "1.0.8", + "version": "1.0.9", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@wendylabsinc/react-three-map", - "version": "1.0.8", + "version": "1.0.9", "license": "MIT", "devDependencies": { "@changesets/cli": "^2.26.1", diff --git a/package.json b/package.json index 6488028..b11cb97 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@wendylabsinc/react-three-map", - "version": "1.0.8", + "version": "1.0.9", "description": "A React wrapper library for Google Maps 3D with React Three Fiber integration", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/src/core/use-coords.tsx b/src/core/use-coords.tsx index cf4cc6e..e49c1f8 100644 --- a/src/core/use-coords.tsx +++ b/src/core/use-coords.tsx @@ -1,5 +1,5 @@ import { _roots, useThree } from "@react-three/fiber"; -import { useMemo } from "react"; +import { useEffect } from "react"; import { Coords } from "../api/coords"; // Use the store type from @react-three/fiber's internal _roots to avoid zustand version mismatch @@ -13,21 +13,22 @@ export function useCoords() { export function useSetCoords({longitude, latitude, altitude}: Coords) { const canvas = useThree(s => s.gl.domElement); - useMemo(()=>{ - const store = _roots.get(canvas)!.store; // eslint-disable-line @typescript-eslint/no-non-null-assertion - const coords : Coords = { longitude, latitude, altitude }; - setCoords(store, coords); - }, [longitude, latitude, altitude]) // eslint-disable-line react-hooks/exhaustive-deps + useEffect(() => { + const root = _roots.get(canvas); + if (!root) return; + const coords: Coords = { longitude, latitude, altitude }; + setCoords(root.store, coords); + }, [canvas, longitude, latitude, altitude]); } export function useSetRootCoords(store: FiberStore, { longitude, latitude, altitude }: Coords) { - useMemo(()=>{ - setCoords(store, {longitude, latitude, altitude}); - }, [longitude, latitude, altitude]) // eslint-disable-line react-hooks/exhaustive-deps + useEffect(() => { + setCoords(store, { longitude, latitude, altitude }); + }, [store, longitude, latitude, altitude]); } export function setCoords(store: FiberStore, coords: Coords) { store.setState({coords} as any) // eslint-disable-line @typescript-eslint/no-explicit-any -} \ No newline at end of file +}