Optimise grid and interaction context

src/components/Grid.js

@@ -4,7 +4,12 @@ import useImage from "use-image";
 
 import Vector2 from "../helpers/Vector2";
 
-import { useGrid } from "../contexts/GridContext";
+import {
+  useGrid,
+  useGridPixelSize,
+  useGridOffset,
+  useGridCellPixelSize,
+} from "../contexts/GridContext";
 
 import squarePatternDark from "../images/SquarePatternDark.png";
 import squarePatternLight from "../images/SquarePatternLight.png";
@@ -12,7 +17,11 @@ import hexPatternDark from "../images/HexPatternDark.png";
 import hexPatternLight from "../images/HexPatternLight.png";
 
 function Grid({ stroke }) {
-  const { grid, gridPixelSize, gridOffset, gridCellPixelSize } = useGrid();
+  const grid = useGrid();
+  const gridPixelSize = useGridPixelSize();
+  const gridOffset = useGridOffset();
+  const gridCellPixelSize = useGridCellPixelSize();
+
   let imageSource;
   if (grid.type === "square") {
     if (stroke === "black") {

src/components/map/MapDrawing.js

@@ -2,9 +2,17 @@ import React, { useState, useEffect } from "react";
 import shortid from "shortid";
 import { Group, Line, Rect, Circle } from "react-konva";
 
-import { useMapInteraction } from "../../contexts/MapInteractionContext";
+import {
+  useDebouncedStageScale,
+  useMapWidth,
+  useMapHeight,
+  useInteractionEmitter,
+} from "../../contexts/MapInteractionContext";
 import { useMapStage } from "../../contexts/MapStageContext";
-import { useGrid } from "../../contexts/GridContext";
+import {
+  useGridCellNormalizedSize,
+  useGridStrokeWidth,
+} from "../../contexts/GridContext";
 
 import Vector2 from "../../helpers/Vector2";
 import {
@@ -25,13 +33,14 @@ function MapDrawing({
   active,
   toolSettings,
 }) {
-  const {
-    stageScale,
-    mapWidth,
-    mapHeight,
-    interactionEmitter,
-  } = useMapInteraction();
-  const { gridCellNormalizedSize, gridStrokeWidth } = useGrid();
+  const stageScale = useDebouncedStageScale();
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const interactionEmitter = useInteractionEmitter();
+
+  const gridCellNormalizedSize = useGridCellNormalizedSize();
+  const gridStrokeWidth = useGridStrokeWidth();
+
   const mapStageRef = useMapStage();
   const [drawingShape, setDrawingShape] = useState(null);
   const [isBrushDown, setIsBrushDown] = useState(false);

src/components/map/MapFog.js

@@ -5,9 +5,21 @@ import useImage from "use-image";
 
 import diagonalPattern from "../../images/DiagonalPattern.png";
 
-import { useMapInteraction } from "../../contexts/MapInteractionContext";
+import {
+  useDebouncedStageScale,
+  useMapWidth,
+  useMapHeight,
+  useInteractionEmitter,
+} from "../../contexts/MapInteractionContext";
 import { useMapStage } from "../../contexts/MapStageContext";
-import { useGrid } from "../../contexts/GridContext";
+import {
+  useGrid,
+  useGridCellPixelSize,
+  useGridCellNormalizedSize,
+  useGridStrokeWidth,
+  useGridCellPixelOffset,
+  useGridOffset,
+} from "../../contexts/GridContext";
 import { useKeyboard } from "../../contexts/KeyboardContext";
 
 import Vector2 from "../../helpers/Vector2";
@@ -41,20 +53,18 @@ function MapFog({
   toolSettings,
   editable,
 }) {
-  const {
-    stageScale,
-    mapWidth,
-    mapHeight,
-    interactionEmitter,
-  } = useMapInteraction();
-  const {
-    grid,
-    gridCellNormalizedSize,
-    gridCellPixelSize,
-    gridStrokeWidth,
-    gridCellPixelOffset,
-    gridOffset,
-  } = useGrid();
+  const stageScale = useDebouncedStageScale();
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const interactionEmitter = useInteractionEmitter();
+
+  const grid = useGrid();
+  const gridCellNormalizedSize = useGridCellNormalizedSize();
+  const gridCellPixelSize = useGridCellPixelSize();
+  const gridStrokeWidth = useGridStrokeWidth();
+  const gridCellPixelOffset = useGridCellPixelOffset();
+  const gridOffset = useGridOffset();
+
   const [gridSnappingSensitivity] = useSetting("map.gridSnappingSensitivity");
   const mapStageRef = useMapStage();
 

src/components/map/MapGridEditor.js

@@ -1,18 +1,21 @@
 import React, { useRef } from "react";
 import { Group, Circle, Rect } from "react-konva";
 
-import { useMapInteraction } from "../../contexts/MapInteractionContext";
+import {
+  useDebouncedStageScale,
+  useMapWidth,
+  useMapHeight,
+  useSetPreventMapInteraction,
+} from "../../contexts/MapInteractionContext";
 import { useKeyboard } from "../../contexts/KeyboardContext";
 
 import Vector2 from "../../helpers/Vector2";
 
 function MapGridEditor({ map, onGridChange }) {
-  const {
-    mapWidth,
-    mapHeight,
-    stageScale,
-    setPreventMapInteraction,
-  } = useMapInteraction();
+  const stageScale = useDebouncedStageScale();
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const setPreventMapInteraction = useSetPreventMapInteraction();
 
   const mapSize = { x: mapWidth, y: mapHeight };
 

src/components/map/MapMeasure.js

@@ -1,9 +1,20 @@
 import React, { useState, useEffect } from "react";
 import { Group, Line, Text, Label, Tag } from "react-konva";
 
-import { useMapInteraction } from "../../contexts/MapInteractionContext";
+import {
+  useDebouncedStageScale,
+  useMapWidth,
+  useMapHeight,
+  useInteractionEmitter,
+} from "../../contexts/MapInteractionContext";
 import { useMapStage } from "../../contexts/MapStageContext";
-import { useGrid } from "../../contexts/GridContext";
+import {
+  useGrid,
+  useGridCellPixelSize,
+  useGridCellNormalizedSize,
+  useGridStrokeWidth,
+  useGridOffset,
+} from "../../contexts/GridContext";
 
 import {
   getDefaultShapeData,
@@ -16,19 +27,17 @@ import { parseGridScale, gridDistance } from "../../helpers/grid";
 import useGridSnapping from "../../hooks/useGridSnapping";
 
 function MapMeasure({ map, active }) {
-  const {
-    stageScale,
-    mapWidth,
-    mapHeight,
-    interactionEmitter,
-  } = useMapInteraction();
-  const {
-    grid,
-    gridCellNormalizedSize,
-    gridStrokeWidth,
-    gridCellPixelSize,
-    gridOffset,
-  } = useGrid();
+  const stageScale = useDebouncedStageScale();
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const interactionEmitter = useInteractionEmitter();
+
+  const grid = useGrid();
+  const gridCellNormalizedSize = useGridCellNormalizedSize();
+  const gridCellPixelSize = useGridCellPixelSize();
+  const gridStrokeWidth = useGridStrokeWidth();
+  const gridOffset = useGridOffset();
+
   const mapStageRef = useMapStage();
   const [drawingShapeData, setDrawingShapeData] = useState(null);
   const [isBrushDown, setIsBrushDown] = useState(false);

src/components/map/MapNotes.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import shortid from "shortid";
 import { Group } from "react-konva";
 
-import { useMapInteraction } from "../../contexts/MapInteractionContext";
+import { useInteractionEmitter } from "../../contexts/MapInteractionContext";
 import { useMapStage } from "../../contexts/MapStageContext";
 import { useAuth } from "../../contexts/AuthContext";
 
@@ -27,7 +27,7 @@ function MapNotes({
   onNoteDragEnd,
   fadeOnHover,
 }) {
-  const { interactionEmitter } = useMapInteraction();
+  const interactionEmitter = useInteractionEmitter();
   const { userId } = useAuth();
   const mapStageRef = useMapStage();
   const [isBrushDown, setIsBrushDown] = useState(false);

src/components/map/MapPointer.js

@@ -1,9 +1,13 @@
 import React, { useEffect } from "react";
 import { Group } from "react-konva";
 
-import { useMapInteraction } from "../../contexts/MapInteractionContext";
+import {
+  useMapWidth,
+  useMapHeight,
+  useInteractionEmitter,
+} from "../../contexts/MapInteractionContext";
 import { useMapStage } from "../../contexts/MapStageContext";
-import { useGrid } from "../../contexts/GridContext";
+import { useGridStrokeWidth } from "../../contexts/GridContext";
 
 import {
   getRelativePointerPositionNormalized,
@@ -22,8 +26,10 @@ function MapPointer({
   visible,
   color,
 }) {
-  const { mapWidth, mapHeight, interactionEmitter } = useMapInteraction();
-  const { gridStrokeWidth } = useGrid();
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const interactionEmitter = useInteractionEmitter();
+  const gridStrokeWidth = useGridStrokeWidth();
   const mapStageRef = useMapStage();
 
   useEffect(() => {

src/components/map/MapTest.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+function MapTest() {}
+
+export default MapTest;

src/components/map/MapToken.js

@@ -10,8 +10,13 @@ import usePrevious from "../../hooks/usePrevious";
 import useGridSnapping from "../../hooks/useGridSnapping";
 
 import { useAuth } from "../../contexts/AuthContext";
-import { useMapInteraction } from "../../contexts/MapInteractionContext";
-import { useGrid } from "../../contexts/GridContext";
+import {
+  useSetPreventMapInteraction,
+  useMapWidth,
+  useMapHeight,
+  useDebouncedStageScale,
+} from "../../contexts/MapInteractionContext";
+import { useGridCellPixelSize } from "../../contexts/GridContext";
 
 import TokenStatus from "../token/TokenStatus";
 import TokenLabel from "../token/TokenLabel";
@@ -31,13 +36,13 @@ function MapToken({
   map,
 }) {
   const { userId } = useAuth();
-  const {
-    setPreventMapInteraction,
-    mapWidth,
-    mapHeight,
-    stageScale,
-  } = useMapInteraction();
-  const { gridCellPixelSize } = useGrid();
+
+  const stageScale = useDebouncedStageScale();
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const setPreventMapInteraction = useSetPreventMapInteraction();
+
+  const gridCellPixelSize = useGridCellPixelSize();
 
   const tokenSource = useDataSource(token, tokenSources, unknownSource);
   const [tokenSourceImage, tokenSourceStatus] = useImage(tokenSource);

src/components/note/Note.js

@@ -3,8 +3,12 @@ import { Rect, Text } from "react-konva";
 import { useSpring, animated } from "react-spring/konva";
 
 import { useAuth } from "../../contexts/AuthContext";
-import { useMapInteraction } from "../../contexts/MapInteractionContext";
-import { useGrid } from "../../contexts/GridContext";
+import {
+  useSetPreventMapInteraction,
+  useMapWidth,
+  useMapHeight,
+} from "../../contexts/MapInteractionContext";
+import { useGridCellPixelSize } from "../../contexts/GridContext";
 
 import colors from "../../helpers/colors";
 
@@ -24,8 +28,12 @@ function Note({
   fadeOnHover,
 }) {
   const { userId } = useAuth();
-  const { mapWidth, mapHeight, setPreventMapInteraction } = useMapInteraction();
-  const { gridCellPixelSize } = useGrid();
+
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const setPreventMapInteraction = useSetPreventMapInteraction();
+
+  const gridCellPixelSize = useGridCellPixelSize();
 
   const minCellSize = Math.min(
     gridCellPixelSize.width,

src/components/token/TokenDragOverlay.js

@@ -1,7 +1,10 @@
 import React from "react";
 
 import { useAuth } from "../../contexts/AuthContext";
-import { useMapInteraction } from "../../contexts/MapInteractionContext";
+import {
+  useMapWidth,
+  useMapHeight,
+} from "../../contexts/MapInteractionContext";
 
 import DragOverlay from "../DragOverlay";
 
@@ -15,7 +18,9 @@ function TokenDragOverlay({
   mapState,
 }) {
   const { userId } = useAuth();
-  const { mapWidth, mapHeight } = useMapInteraction();
+
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
 
   function handleTokenRemove() {
     // Handle other tokens when a vehicle gets deleted

src/contexts/GridContext.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useState, useEffect } from "react";
 
 import Vector2 from "../helpers/Vector2";
 import Size from "../helpers/Size";
@@ -37,55 +37,103 @@ const defaultValue = {
   gridCellPixelOffset: new Vector2(0, 0),
 };
 
-const GridContext = React.createContext(defaultValue);
+const GridContext = React.createContext(defaultValue.grid);
+const GridPixelSizeContext = React.createContext(defaultValue.gridPixelSize);
+const GridCellPixelSizeContext = React.createContext(
+  defaultValue.gridCellPixelSize
+);
+const GridCellNormalizedSizeContext = React.createContext(
+  defaultValue.gridCellNormalizedSize
+);
+const GridOffsetContext = React.createContext(defaultValue.gridOffset);
+const GridStrokeWidthContext = React.createContext(
+  defaultValue.gridStrokeWidth
+);
+const GridCellPixelOffsetContext = React.createContext(
+  defaultValue.gridCellPixelOffset
+);
 
 const defaultStrokeWidth = 1 / 10;
 
-export function GridProvider({ grid, width, height, children }) {
+export function GridProvider({ grid: inputGrid, width, height, children }) {
+  let grid = inputGrid;
+
   if (!grid?.size.x || !grid?.size.y) {
-    return (
-      <GridContext.Provider value={defaultValue}>
-        {children}
-      </GridContext.Provider>
-    );
+    grid = defaultValue.grid;
   }
 
-  const gridPixelSize = getGridPixelSize(grid, width, height);
-  const gridCellPixelSize = getCellPixelSize(
+  const [gridPixelSize, setGridPixelSize] = useState(
+    defaultValue.gridCellPixelSize
+  );
+  const [gridCellPixelSize, setGridCellPixelSize] = useState(
+    defaultValue.gridCellPixelSize
+  );
+  const [gridCellNormalizedSize, setGridCellNormalizedSize] = useState(
+    defaultValue.gridCellNormalizedSize
+  );
+  const [gridOffset, setGridOffset] = useState(defaultValue.gridOffset);
+  const [gridStrokeWidth, setGridStrokeWidth] = useState(
+    defaultValue.gridStrokeWidth
+  );
+  const [gridCellPixelOffset, setGridCellPixelOffset] = useState(
+    defaultValue.gridCellPixelOffset
+  );
+
+  useEffect(() => {
+    const _gridPixelSize = getGridPixelSize(grid, width, height);
+    const _gridCellPixelSize = getCellPixelSize(
       grid,
-    gridPixelSize.width,
-    gridPixelSize.height
+      _gridPixelSize.width,
+      _gridPixelSize.height
     );
-  const gridCellNormalizedSize = new Size(
-    gridCellPixelSize.width / width,
-    gridCellPixelSize.height / height
+    const _gridCellNormalizedSize = new Size(
+      _gridCellPixelSize.width / width,
+      _gridCellPixelSize.height / height
     );
-  const gridOffset = Vector2.multiply(grid.inset.topLeft, {
+    const _gridOffset = Vector2.multiply(grid.inset.topLeft, {
       x: width,
       y: height,
     });
-  const gridStrokeWidth =
-    (gridCellPixelSize.width < gridCellPixelSize.height
-      ? gridCellPixelSize.width
-      : gridCellPixelSize.height) * defaultStrokeWidth;
+    const _gridStrokeWidth =
+      (_gridCellPixelSize.width < _gridCellPixelSize.height
+        ? _gridCellPixelSize.width
+        : _gridCellPixelSize.height) * defaultStrokeWidth;
 
-  let gridCellPixelOffset = { x: 0, y: 0 };
+    let _gridCellPixelOffset = { x: 0, y: 0 };
     // Move hex tiles to top left
     if (grid.type === "hexVertical" || grid.type === "hexHorizontal") {
-    gridCellPixelOffset = Vector2.multiply(gridCellPixelSize, 0.5);
+      _gridCellPixelOffset = Vector2.multiply(_gridCellPixelSize, 0.5);
     }
 
-  const value = {
-    grid,
-    gridPixelSize,
-    gridCellPixelSize,
-    gridCellNormalizedSize,
-    gridOffset,
-    gridStrokeWidth,
-    gridCellPixelOffset,
-  };
+    setGridPixelSize(_gridPixelSize);
+    setGridCellPixelSize(_gridCellPixelSize);
+    setGridCellNormalizedSize(_gridCellNormalizedSize);
+    setGridOffset(_gridOffset);
+    setGridStrokeWidth(_gridStrokeWidth);
+    setGridCellPixelOffset(_gridCellPixelOffset);
+  }, [grid, width, height]);
 
-  return <GridContext.Provider value={value}>{children}</GridContext.Provider>;
+  return (
+    <GridContext.Provider value={grid}>
+      <GridPixelSizeContext.Provider value={gridPixelSize}>
+        <GridCellPixelSizeContext.Provider value={gridCellPixelSize}>
+          <GridCellNormalizedSizeContext.Provider
+            value={gridCellNormalizedSize}
+          >
+            <GridOffsetContext.Provider value={gridOffset}>
+              <GridStrokeWidthContext.Provider value={gridStrokeWidth}>
+                <GridCellPixelOffsetContext.Provider
+                  value={gridCellPixelOffset}
+                >
+                  {children}
+                </GridCellPixelOffsetContext.Provider>
+              </GridStrokeWidthContext.Provider>
+            </GridOffsetContext.Provider>
+          </GridCellNormalizedSizeContext.Provider>
+        </GridCellPixelSizeContext.Provider>
+      </GridPixelSizeContext.Provider>
+    </GridContext.Provider>
+  );
 }
 
 export function useGrid() {
@@ -96,4 +144,54 @@ export function useGrid() {
   return context;
 }
 
-export default GridContext;
+export function useGridPixelSize() {
+  const context = useContext(GridPixelSizeContext);
+  if (context === undefined) {
+    throw new Error("useGridPixelSize must be used within a GridProvider");
+  }
+  return context;
+}
+
+export function useGridCellPixelSize() {
+  const context = useContext(GridCellPixelSizeContext);
+  if (context === undefined) {
+    throw new Error("useGridCellPixelSize must be used within a GridProvider");
+  }
+  return context;
+}
+
+export function useGridCellNormalizedSize() {
+  const context = useContext(GridCellNormalizedSizeContext);
+  if (context === undefined) {
+    throw new Error(
+      "useGridCellNormalizedSize must be used within a GridProvider"
+    );
+  }
+  return context;
+}
+
+export function useGridOffset() {
+  const context = useContext(GridOffsetContext);
+  if (context === undefined) {
+    throw new Error("useGridOffset must be used within a GridProvider");
+  }
+  return context;
+}
+
+export function useGridStrokeWidth() {
+  const context = useContext(GridStrokeWidthContext);
+  if (context === undefined) {
+    throw new Error("useGridStrokeWidth must be used within a GridProvider");
+  }
+  return context;
+}
+
+export function useGridCellPixelOffset() {
+  const context = useContext(GridCellPixelOffsetContext);
+  if (context === undefined) {
+    throw new Error(
+      "useGridCellPixelOffset must be used within a GridProvider"
+    );
+  }
+  return context;
+}

src/contexts/MapInteractionContext.js

@@ -1,24 +1,125 @@
 import React, { useContext } from "react";
+import useDebounce from "../hooks/useDebounce";
 
-const MapInteractionContext = React.createContext({
-  stageScale: 1,
-  stageWidth: 1,
-  stageHeight: 1,
-  setPreventMapInteraction: () => {},
-  mapWidth: 1,
-  mapHeight: 1,
-  interactionEmitter: null,
-});
-export const MapInteractionProvider = MapInteractionContext.Provider;
+const StageScaleContext = React.createContext();
+const DebouncedStageScaleContext = React.createContext();
+const StageWidthContext = React.createContext();
+const StageHeightContext = React.createContext();
+const SetPreventMapInteractionContext = React.createContext();
+const MapWidthContext = React.createContext();
+const MapHeightContext = React.createContext();
+const InteractionEmitterContext = React.createContext();
 
-export function useMapInteraction() {
-  const context = useContext(MapInteractionContext);
+export function MapInteractionProvider({ value, children }) {
+  const {
+    stageScale,
+    stageWidth,
+    stageHeight,
+    setPreventMapInteraction,
+    mapWidth,
+    mapHeight,
+    interactionEmitter,
+  } = value;
+  const debouncedStageScale = useDebounce(stageScale, 200);
+  return (
+    <InteractionEmitterContext.Provider value={interactionEmitter}>
+      <SetPreventMapInteractionContext.Provider
+        value={setPreventMapInteraction}
+      >
+        <StageWidthContext.Provider value={stageWidth}>
+          <StageHeightContext.Provider value={stageHeight}>
+            <MapWidthContext.Provider value={mapWidth}>
+              <MapHeightContext.Provider value={mapHeight}>
+                <StageScaleContext.Provider value={stageScale}>
+                  <DebouncedStageScaleContext.Provider
+                    value={debouncedStageScale}
+                  >
+                    {children}
+                  </DebouncedStageScaleContext.Provider>
+                </StageScaleContext.Provider>
+              </MapHeightContext.Provider>
+            </MapWidthContext.Provider>
+          </StageHeightContext.Provider>
+        </StageWidthContext.Provider>
+      </SetPreventMapInteractionContext.Provider>
+    </InteractionEmitterContext.Provider>
+  );
+}
+
+export function useInteractionEmitter() {
+  const context = useContext(InteractionEmitterContext);
   if (context === undefined) {
     throw new Error(
-      "useMapInteraction must be used within a MapInteractionProvider"
+      "useInteractionEmitter must be used within a MapInteractionProvider"
     );
   }
   return context;
 }
 
-export default MapInteractionContext;
+export function useSetPreventMapInteraction() {
+  const context = useContext(SetPreventMapInteractionContext);
+  if (context === undefined) {
+    throw new Error(
+      "useSetPreventMapInteraction must be used within a MapInteractionProvider"
+    );
+  }
+  return context;
+}
+
+export function useStageWidth() {
+  const context = useContext(StageWidthContext);
+  if (context === undefined) {
+    throw new Error(
+      "useStageWidth must be used within a MapInteractionProvider"
+    );
+  }
+  return context;
+}
+
+export function useStageHeight() {
+  const context = useContext(StageHeightContext);
+  if (context === undefined) {
+    throw new Error(
+      "useStageHeight must be used within a MapInteractionProvider"
+    );
+  }
+  return context;
+}
+
+export function useMapWidth() {
+  const context = useContext(MapWidthContext);
+  if (context === undefined) {
+    throw new Error("useMapWidth must be used within a MapInteractionProvider");
+  }
+  return context;
+}
+
+export function useMapHeight() {
+  const context = useContext(MapHeightContext);
+  if (context === undefined) {
+    throw new Error(
+      "useMapHeight must be used within a MapInteractionProvider"
+    );
+  }
+  return context;
+}
+
+export function useStageScale() {
+  const context = useContext(StageScaleContext);
+  if (context === undefined) {
+    throw new Error(
+      "useStageScale must be used within a MapInteractionProvider"
+    );
+  }
+  return context;
+}
+
+export function useDebouncedStageScale() {
+  const context = useContext(DebouncedStageScaleContext);
+  if (context === undefined) {
+    throw new Error(
+      "useDebouncedStageScale must be used within a MapInteractionProvider"
+    );
+  }
+  return context;
+}

src/hooks/useGridSnapping.js

@@ -7,7 +7,12 @@ import {
 
 import useSetting from "./useSetting";
 
-import { useGrid } from "../contexts/GridContext";
+import {
+  useGrid,
+  useGridOffset,
+  useGridCellPixelSize,
+  useGridCellPixelOffset,
+} from "../contexts/GridContext";
 
 /**
  * Returns a function that when called will snap a node to the current grid
@@ -19,12 +24,10 @@ function useGridSnapping(snappingSensitivity) {
   );
   snappingSensitivity = snappingSensitivity || defaultSnappingSensitivity;
 
-  const {
-    grid,
-    gridOffset,
-    gridCellPixelSize,
-    gridCellPixelOffset,
-  } = useGrid();
+  const grid = useGrid();
+  const gridOffset = useGridOffset();
+  const gridCellPixelSize = useGridCellPixelSize();
+  const gridCellPixelOffset = useGridCellPixelOffset();
 
   /**
    * @param {Vector2} node The node to snap