diff --git a/.changeset/spatialcanvas-picking-perf-and-rules-of-react.md b/.changeset/spatialcanvas-picking-perf-and-rules-of-react.md
new file mode 100644
index 00000000..535c3001
--- /dev/null
+++ b/.changeset/spatialcanvas-picking-perf-and-rules-of-react.md
@@ -0,0 +1,31 @@
+---
+"@spatialdata/vis": minor
+"@spatialdata/layers": patch
+"@spatialdata/react": patch
+---
+
+SpatialCanvas hover/picking performance and Rules-of-React cleanup.
+
+Picking/tooltip performance:
+
+- New `hoverTooltipMode` prop (`'off' | 'simple' | 'aggregate'`, default
+  `'simple'`) on `SpatialCanvas` and `SpatialCanvasViewer`, with a matching
+  selector in the `SpatialCanvas` UI. `'simple'` resolves the tooltip from the
+  single top-most pick deck.gl already does for hover/highlight; `'aggregate'`
+  adds `pickMultipleObjects` GPU passes to include every layer under the cursor
+  (more expensive); `'off'` makes shape layers non-pickable entirely (no
+  autoHighlight, no picking-buffer render) — the cheapest mode. Replaces the
+  earlier boolean `aggregateHoverTooltips`.
+- Shape layers are made non-pickable (and `autoHighlight` disabled) while the
+  camera is being panned/zoomed, so deck.gl does not re-render the shape
+  geometry into the picking buffer during gestures. New `pickingEnabled` option
+  on the shapes layer (`@spatialdata/layers`) drives this.
+- Hover tooltip resolution is suppressed while a pointer button is held (drag),
+  and the per-missing-layer supplemental aggregation pick is collapsed into a
+  single batched pick.
+
+Rules-of-React fixes (eslint-plugin-react-hooks, `pnpm lint:react` now clean and
+the `react-lint` CI job is required): removed ref reads/writes during render and
+replaced setState-in-effect patterns with derived state in `@spatialdata/react`
+`useSpatialData` and the vis `Transforms`, `Table`, `Shapes`, `ImageView`, and
+`SpatialCanvas` components.
diff --git a/.claude/launch.json b/.claude/launch.json
index 8a2e2dbe..cf42fafc 100644
--- a/.claude/launch.json
+++ b/.claude/launch.json
@@ -5,6 +5,7 @@
       "name": "vis-demo",
       "runtimeExecutable": "pnpm",
       "runtimeArgs": ["--filter", "@spatialdata/vis", "dev:demo"],
+      "autoPort": true,
       "port": 5173
     },
     {
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index d9b109da..0f6358a4 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -17,9 +17,9 @@ jobs:
     runs-on: ubuntu-latest
     permissions:
       contents: read
-    # Surfaces React Hooks / React Compiler (Rules-of-React) findings for the
-    # React-shipping packages via eslint-plugin-react-hooks. Informational for
-    # now: there is an existing backlog of findings, so this must not gate merges.
+    # Enforces React Hooks / React Compiler (Rules-of-React) compliance for the
+    # React-shipping packages via eslint-plugin-react-hooks. The backlog has been
+    # cleared, so this is a required gate: any new finding fails the check.
     steps:
       - uses: actions/checkout@v4
         with:
@@ -39,11 +39,6 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Lint React packages (react-hooks / react-compiler rules)
-        # continue-on-error (at the step, not the job) keeps this check green
-        # while the backlog exists, so it does not read as a failing/required
-        # check; findings still show in this step's log. Remove this line once
-        # `pnpm lint:react` is clean to turn it into a required gate.
-        continue-on-error: true
         run: pnpm lint:react
 
   test:
diff --git a/packages/layers/src/shapesLayer.ts b/packages/layers/src/shapesLayer.ts
index 08cd5c48..dfb4791d 100644
--- a/packages/layers/src/shapesLayer.ts
+++ b/packages/layers/src/shapesLayer.ts
@@ -237,6 +237,12 @@ export interface CreateShapesDeckLayerOptions {
   spatialCoordinateSystem?: string | null;
   onShapeHover?: (event: ShapesLayerPickEvent) => void;
   onShapeClick?: (event: ShapesLayerPickEvent) => void;
+  /**
+   * When false, the layer is rendered non-pickable with autoHighlight disabled.
+   * Used to suppress deck.gl's per-pointer-move picking-buffer render over large
+   * shape geometry while the camera is being panned/zoomed. Defaults to true.
+   */
+  pickingEnabled?: boolean;
 }
 
 function multiplyAlpha(
@@ -603,8 +609,8 @@ function createPolygonDeckLayer(
     stroked: true,
     opacity: options.opacity ?? 1,
     modelMatrix: options.modelMatrix,
-    pickable: true,
-    autoHighlight: true,
+    pickable: options.pickingEnabled ?? true,
+    autoHighlight: options.pickingEnabled ?? true,
     highlightColor: [255, 255, 0, 128],
     onHover: createPickHandler(
       options.id,
@@ -648,8 +654,8 @@ function createCircleDeckLayer(
     },
     opacity: options.opacity ?? 1,
     modelMatrix: options.modelMatrix,
-    pickable: true,
-    autoHighlight: true,
+    pickable: options.pickingEnabled ?? true,
+    autoHighlight: options.pickingEnabled ?? true,
     highlightColor: [255, 255, 0, 128],
     onHover: createPickHandler(
       options.id,
diff --git a/packages/react/src/hooks/useSpatialData.ts b/packages/react/src/hooks/useSpatialData.ts
index 484350bf..aae94ad9 100644
--- a/packages/react/src/hooks/useSpatialData.ts
+++ b/packages/react/src/hooks/useSpatialData.ts
@@ -1,36 +1,54 @@
-import { useEffect, useState } from 'react';
 import type { SpatialData } from '@spatialdata/core';
+import { useEffect, useState } from 'react';
 import { useSpatialDataContext } from '../provider/SpatialDataProvider';
 
+type ResolvedSpatialData = {
+  /** The promise this result was produced from, used to detect stale results. */
+  promise: Promise<SpatialData> | null;
+  spatialData: SpatialData | null;
+  error: Error | null;
+};
+
 export function useSpatialData() {
   const { spatialDataPromise } = useSpatialDataContext();
-  const [spatialData, setSpatialData] = useState<SpatialData | null>(null);
-  const [error, setError] = useState<Error | null>(null);
-  const [loading, setLoading] = useState<boolean>(true);
+  // Track which promise each settled result came from so loading/reset can be
+  // derived during render rather than synchronised with a setState-in-effect.
+  const [resolved, setResolved] = useState<ResolvedSpatialData>({
+    promise: null,
+    spatialData: null,
+    error: null,
+  });
 
   useEffect(() => {
+    if (!spatialDataPromise) return;
     let cancelled = false;
-    setLoading(true);
-    setError(null);
-    setSpatialData(null);
-    if (!spatialDataPromise) {
-      setLoading(false);
-      return;
-    }
     spatialDataPromise
       .then((s) => {
-        if (!cancelled) setSpatialData(s);
+        if (!cancelled) setResolved({ promise: spatialDataPromise, spatialData: s, error: null });
       })
       .catch((e: unknown) => {
-        if (!cancelled) setError(e instanceof Error ? e : new Error(String(e)));
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false);
+        if (!cancelled) {
+          setResolved({
+            promise: spatialDataPromise,
+            spatialData: null,
+            error: e instanceof Error ? e : new Error(String(e)),
+          });
+        }
       });
     return () => {
       cancelled = true;
     };
   }, [spatialDataPromise]);
 
-  return { spatialData, loading, error } as const;
+  // When the current promise hasn't settled into `resolved` yet, we're loading
+  // (or idle, if there is no promise). Deriving this avoids resetting state in
+  // an effect every time `spatialDataPromise` changes.
+  const settled = resolved.promise === spatialDataPromise;
+  const loading = Boolean(spatialDataPromise) && !settled;
+
+  return {
+    spatialData: settled ? resolved.spatialData : null,
+    loading,
+    error: settled ? resolved.error : null,
+  } as const;
 }
diff --git a/packages/vis/package.json b/packages/vis/package.json
index 4ae88ed5..49493ed7 100644
--- a/packages/vis/package.json
+++ b/packages/vis/package.json
@@ -21,7 +21,7 @@
     "build": "vite build && tsc --noEmit",
     "dev": "node scripts/dev.mjs",
     "dev:stop": "node ../../scripts/dev-stop.mjs",
-    "dev:demo": "vite --config vite.config.demo.ts --host 127.0.0.1 --port 5173 --strictPort",
+    "dev:demo": "vite --config vite.config.demo.ts",
     "watch": "vite build --watch",
     "test": "vitest run",
     "test:watch": "vitest",
diff --git a/packages/vis/scripts/dev.mjs b/packages/vis/scripts/dev.mjs
index 45a3090e..871a5a43 100644
--- a/packages/vis/scripts/dev.mjs
+++ b/packages/vis/scripts/dev.mjs
@@ -33,18 +33,18 @@ async function fixtureServerIsOurs(port) {
 }
 
 /**
- * Check the ports we need before spawning anything, so a leftover dev server
- * (often from another checkout) produces a clear message instead of a cryptic
- * strict-port crash. Returns whether we still need to start the fixture server.
+ * Check the ports we need before spawning anything: a busy demo port just gets a
+ * heads-up (Vite falls back to a free one), while a foreign process on the fixed
+ * fixture port is fatal. Returns whether we still need to start the fixture server.
  */
 async function preflight() {
   if (await isPortInUse(DEMO_PORT)) {
     const holder = describePortHolder(DEMO_PORT);
-    console.error(
-      `\n[dev] Demo port ${DEMO_PORT} is already in use${holder ? `:\n  ${holder}` : '.'}`
+    console.log(
+      `[dev] Demo port ${DEMO_PORT} is already in use${
+        holder ? ` (${holder})` : ''
+      }; Vite will fall back to the next free port.`
     );
-    console.error('[dev] Run `pnpm dev:stop` to clear SpatialData dev processes, then retry.\n');
-    process.exit(1);
   }
 
   if (await isPortInUse(FIXTURE_SERVER_PORT)) {
@@ -126,13 +126,6 @@ if (startFixtures) {
 }
 console.log(`Starting ${startedParts.join(', ')}...`);
 start('watch', ['vite', 'build', '--watch']);
-start('demo', [
-  'vite',
-  '--config',
-  'vite.config.demo.ts',
-  '--host',
-  '127.0.0.1',
-  '--port',
-  String(DEMO_PORT),
-  '--strictPort',
-]);
+// Host/port (and the free-port fallback) are owned by vite.config.demo.ts so
+// the port selection stays in one place; honour PORT if the caller pins it.
+start('demo', ['vite', '--config', 'vite.config.demo.ts']);
diff --git a/packages/vis/src/ImageView/index.tsx b/packages/vis/src/ImageView/index.tsx
index 4010e16d..ddbfc202 100644
--- a/packages/vis/src/ImageView/index.tsx
+++ b/packages/vis/src/ImageView/index.tsx
@@ -148,31 +148,24 @@ export default function ImageView() {
   const [selectedImage, setSelectedImage] = useState<string>('');
   const [ref, { width, height }] = useMeasure();
 
-  useEffect(() => {
-    if (!spatialData?.images) return;
-    if (selectedImage === '' || !spatialData.images[selectedImage]) {
-      setSelectedImage(Object.keys(spatialData.images)[0]);
-    }
-  }, [spatialData?.images, selectedImage]);
+  const imageKeys = useMemo(() => Object.keys(spatialData?.images ?? {}), [spatialData?.images]);
+  // Default to the first available image, derived during render.
+  const effectiveImage =
+    selectedImage && imageKeys.includes(selectedImage) ? selectedImage : (imageKeys[0] ?? '');
 
   const vivStores = useMemo(() => {
     return createVivStores();
   }, []);
   const image = useMemo(() => {
-    return spatialData?.images?.[selectedImage];
-  }, [selectedImage, spatialData?.images]);
-  const [imageUrl, setImageUrl] = useState<string | URL>();
-  useEffect(() => {
-    if (image) {
-      setImageUrl(image.url ?? '');
-    } else {
-      setImageUrl('');
-    }
-  }, [image]);
+    return spatialData?.images?.[effectiveImage];
+  }, [effectiveImage, spatialData?.images]);
+  // The url is synchronously available on the image, so derive it rather than
+  // syncing through state in an effect.
+  const imageUrl = useMemo<string | URL>(() => image?.url ?? '', [image]);
   return (
     <div ref={ref} style={containerStyle}>
       {spatialData?.images && (
-        <select value={selectedImage || ''} onChange={(e) => setSelectedImage(e.target.value)}>
+        <select value={effectiveImage} onChange={(e) => setSelectedImage(e.target.value)}>
           {Object.keys(spatialData.images).map((key) => (
             <option key={key} value={key}>
               {key}
diff --git a/packages/vis/src/Shapes/index.tsx b/packages/vis/src/Shapes/index.tsx
index 43bc61c9..a0a39404 100644
--- a/packages/vis/src/Shapes/index.tsx
+++ b/packages/vis/src/Shapes/index.tsx
@@ -1,7 +1,7 @@
 import { useSpatialData } from '@spatialdata/react';
 import JsonView from '@uiw/react-json-view';
 import { darkTheme } from '@uiw/react-json-view/dark';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 // import type { Table } from "@spatialdata/core";
 
 export default function ShapesComponent() {
@@ -9,44 +9,39 @@ export default function ShapesComponent() {
   const [selectedShapes, setSelectedShapes] = useState<string>('');
   const shapeKeys = useMemo(() => Object.keys(spatialData?.shapes ?? {}), [spatialData?.shapes]);
 
-  // Default to first available shape
-  useEffect(() => {
-    if (shapeKeys.length > 0 && (!selectedShapes || !shapeKeys.includes(selectedShapes))) {
-      setSelectedShapes(shapeKeys[0]);
-    }
-  }, [shapeKeys, selectedShapes]);
+  // Default to the first available shape, derived during render.
+  const effectiveShapes =
+    selectedShapes && shapeKeys.includes(selectedShapes) ? selectedShapes : (shapeKeys[0] ?? '');
 
   const shapes = useMemo(() => {
-    return spatialData?.shapes?.[selectedShapes];
-  }, [selectedShapes, spatialData?.shapes]);
-  const [shapesData, setShapesData] = useState<any>(undefined);
-  useEffect(() => {
-    if (shapes) {
-      const result = shapes.getTransformation();
-      if (result.ok) {
-        const t = result.value;
-        setShapesData({
-          type: t.type,
-          input: t.input,
-          output: t.output,
-          matrix: t.toArray(),
-        });
-      } else {
-        // Show the error info
-        setShapesData({
-          error: result.error.message,
-          availableCoordinateSystems: result.error.availableCoordinateSystems,
-        });
-      }
-    } else {
-      setShapesData(undefined);
+    return spatialData?.shapes?.[effectiveShapes];
+  }, [effectiveShapes, spatialData?.shapes]);
+
+  // getTransformation() is synchronous, so the displayed data is pure derived
+  // state rather than something to sync into an effect.
+  const shapesData = useMemo(() => {
+    if (!shapes) return undefined;
+    const result = shapes.getTransformation();
+    if (result.ok) {
+      const t = result.value;
+      return {
+        type: t.type,
+        input: t.input,
+        output: t.output,
+        matrix: t.toArray(),
+      };
     }
+    // Show the error info
+    return {
+      error: result.error.message,
+      availableCoordinateSystems: result.error.availableCoordinateSystems,
+    };
   }, [shapes]);
   return (
     <div>
       <h3>Shapes component:</h3>
       {spatialData?.shapes && (
-        <select value={selectedShapes || ''} onChange={(e) => setSelectedShapes(e.target.value)}>
+        <select value={effectiveShapes} onChange={(e) => setSelectedShapes(e.target.value)}>
           {Object.keys(spatialData.shapes).map((key) => (
             <option key={key} value={key}>
               {key}
diff --git a/packages/vis/src/SpatialCanvas/SpatialCanvasViewer.tsx b/packages/vis/src/SpatialCanvas/SpatialCanvasViewer.tsx
index 76d6c26d..20d17dc6 100644
--- a/packages/vis/src/SpatialCanvas/SpatialCanvasViewer.tsx
+++ b/packages/vis/src/SpatialCanvas/SpatialCanvasViewer.tsx
@@ -12,6 +12,8 @@ import {
   useState,
 } from 'react';
 import { createPortal } from 'react-dom';
+import { ensureCodecWorkers } from '../codecWorkers';
+import { ImageLayerContextProvider } from './ImageLayerContext';
 import {
   type SpatialCanvasTooltipRenderProps,
   SpatialFeatureTooltip,
@@ -19,30 +21,34 @@ import {
 } from './SpatialFeatureTooltip';
 import { SpatialViewer } from './SpatialViewer';
 import { VivLoaderRegistryProvider } from './VivLoaderRegistry';
-import { getDeckFromDeckGlRef, resolveHoverFeatureTooltip } from './featureTooltipHover';
 import {
+  type HoverPointerEvent,
+  getDeckFromDeckGlRef,
+  isHoverDuringDrag,
+  resolveHoverFeatureTooltip,
+} from './featureTooltipHover';
+import {
+  type RenderStackHostLayerResolver,
+  type RenderStackLayerInputs,
+  type UnknownRenderStackHostLayerHandler,
   renderStackOrder,
   renderStackToLayerInputs,
   resolveRenderStackHostLayers,
   sortLayersByRenderStackOrder,
-  type RenderStackHostLayerResolver,
-  type RenderStackLayerInputs,
-  type UnknownRenderStackHostLayerHandler,
 } from './renderStackAdapters';
-import { ImageLayerContextProvider } from './ImageLayerContext';
 import type { ElementsByType, LayerConfig, ShapesLayerPickEvent, ViewState } from './types';
 import {
   type LabelFeaturePickEventData,
   type ShapeFeaturePickEventData,
   useLayerData,
 } from './useLayerData';
-import {
-  type VivImageExtensionResolver,
-  type VivImagePassthroughOptions,
-  type VivImagePropsResolver,
-} from './vivImagePassthrough';
-import { ensureCodecWorkers } from '../codecWorkers';
+import { useViewInteractionGate } from './useViewInteractionGate';
 import { getAvailableElements } from './utils';
+import type {
+  VivImageExtensionResolver,
+  VivImagePassthroughOptions,
+  VivImagePropsResolver,
+} from './vivImagePassthrough';
 
 export type {
   VivImageExtensionResolver,
@@ -54,6 +60,21 @@ export type SpatialCanvasViewerRenderTooltip =
   | false
   | ((props: SpatialCanvasTooltipRenderProps) => ReactNode);
 
+/**
+ * Hover tooltip / picking behaviour:
+ * - `'off'`: no hover tooltip, and shape layers are made non-pickable (no
+ *   autoHighlight, no picking buffer render) — the cheapest mode.
+ * - `'simple'` (default): tooltip from the single top-most pick under the cursor.
+ * - `'aggregate'`: tooltip aggregated across all layers under the cursor, which
+ *   issues extra `pickMultipleObjects` GPU passes per pointer move.
+ */
+export type HoverTooltipMode = 'off' | 'simple' | 'aggregate';
+
+/** Runtime narrowing for arbitrary strings (e.g. a `<select>` value) to a mode. */
+export function isHoverTooltipMode(value: string): value is HoverTooltipMode {
+  return value === 'off' || value === 'simple' || value === 'aggregate';
+}
+
 type SpatialFeaturePickEventRuntimeFields = {
   coordinateSystem: string | null;
   spatialData?: SpatialData | null;
@@ -95,9 +116,11 @@ export interface SpatialCanvasViewerProps {
   autoFit?: boolean;
   style?: CSSProperties;
   /**
-   * When true (default), hover tooltips aggregate picks from all layers under the cursor.
+   * Hover tooltip / picking behaviour: `'off'` | `'simple'` (default) |
+   * `'aggregate'`. See {@link HoverTooltipMode}. `'aggregate'` is more expensive
+   * (extra GPU pick passes per move); `'off'` disables shape picking entirely.
    */
-  aggregateHoverTooltips?: boolean;
+  hoverTooltipMode?: HoverTooltipMode;
   /** Global fallback Viv LayerExtension instances for image layers. */
   vivImageExtensions?: unknown[];
   /** Per-image LayerExtension factory (runtime attachment). */
@@ -184,6 +207,12 @@ interface UseSpatialCanvasRendererFromLayerInputsOptions {
   sortDeckLayers?: boolean;
   autoFit?: boolean;
   vivPassthrough?: VivImagePassthroughOptions;
+  /**
+   * When false, shape layers are built non-pickable (autoHighlight off), so deck
+   * does not render their geometry into the picking buffer. Used both for the
+   * "off" tooltip mode and to suppress picking during pan/zoom. Defaults to true.
+   */
+  pickingEnabled?: boolean;
 }
 
 export function useSpatialCanvasRendererFromLayerInputs({
@@ -200,6 +229,7 @@ export function useSpatialCanvasRendererFromLayerInputs({
   sortDeckLayers,
   autoFit = true,
   vivPassthrough,
+  pickingEnabled = true,
 }: UseSpatialCanvasRendererFromLayerInputsOptions) {
   ensureCodecWorkers();
 
@@ -221,7 +251,7 @@ export function useSpatialCanvasRendererFromLayerInputs({
     vivPassthrough
   );
 
-  const generatedDeckLayers = layerData.getLayers();
+  const generatedDeckLayers = layerData.getLayers({ pickingEnabled });
   const deckLayers = useMemo(() => {
     const composed = composeSpatialDeckLayers(generatedDeckLayers, [
       ...(hostDeckLayers ?? []),
@@ -397,7 +427,7 @@ function SpatialCanvasViewerInner({
   showLoadingOverlay = true,
   autoFit = true,
   style,
-  aggregateHoverTooltips = true,
+  hoverTooltipMode = 'simple',
   vivImageExtensions,
   vivImageExtensionResolver,
   vivImagePropsResolver,
@@ -405,8 +435,11 @@ function SpatialCanvasViewerInner({
   const [measureRef, { width, height }] = useMeasure();
   const viewerContainerRef = useRef<HTMLDivElement | null>(null);
   const deckRef = useRef<DeckGLRef | null>(null);
+  const { interacting, onInteractionStateChange } = useViewInteractionGate();
+  // Shapes are pickable unless tooltips are off or the camera is being moved.
+  const pickingEnabled = hoverTooltipMode !== 'off' && !interacting;
   const [hoverTooltip, setHoverTooltip] = useState<
-    (SpatialFeatureTooltipData & { x: number; y: number }) | null
+    (SpatialFeatureTooltipData & { x: number; y: number; clientX: number; clientY: number }) | null
   >(null);
 
   const vw = width ?? 0;
@@ -447,65 +480,99 @@ function SpatialCanvasViewerInner({
     sortDeckLayers: Boolean(renderStack),
     autoFit,
     vivPassthrough,
+    pickingEnabled,
   });
   const hoverPickLayerIds = useMemo(
     () => Array.from(renderer.enabledLayerIds),
     [renderer.enabledLayerIds]
   );
+  // Feed deck's interaction state into the gate (via deckProps so the existing
+  // spread reaches both DeckGL branches) while still invoking any caller-supplied
+  // onInteractionStateChange handler.
+  const mergedDeckProps = useMemo(() => {
+    const callerOnInteractionStateChange = deckProps?.onInteractionStateChange;
+    return {
+      ...deckProps,
+      onInteractionStateChange: (
+        state: Parameters<NonNullable<DeckGLProps['onInteractionStateChange']>>[0]
+      ) => {
+        callerOnInteractionStateChange?.(state);
+        onInteractionStateChange(state);
+      },
+    };
+  }, [deckProps, onInteractionStateChange]);
+
+  // The expensive part of hovering: aggregate-pick the feature(s) under the
+  // cursor and position the tooltip. Throttled to one run per animation frame.
+  const resolveTooltip = useCallback(
+    (info: PickingInfo) => {
+      if (hoverTooltipMode === 'off' || !shouldRenderInternalTooltip(renderTooltip)) {
+        setHoverTooltip(null);
+        return;
+      }
+      const tooltip =
+        info.picked && typeof info.x === 'number' && typeof info.y === 'number'
+          ? resolveHoverFeatureTooltip(info, renderer.getFeatureTooltip, {
+              aggregate: hoverTooltipMode === 'aggregate',
+              deck: getDeckFromDeckGlRef(deckRef),
+              pickLayerIds: hoverPickLayerIds,
+            })
+          : null;
+      // Resolve viewport coordinates here (in the event handler) rather than
+      // reading the container ref during render.
+      if (!tooltip) {
+        setHoverTooltip(null);
+        return;
+      }
+      const rect = viewerContainerRef.current?.getBoundingClientRect();
+      setHoverTooltip({
+        ...tooltip,
+        clientX: (rect?.left ?? 0) + tooltip.x,
+        clientY: (rect?.top ?? 0) + tooltip.y,
+      });
+    },
+    [hoverTooltipMode, hoverPickLayerIds, renderTooltip, renderer.getFeatureTooltip]
+  );
 
   const handleHover = useCallback(
-    (info: PickingInfo) => {
+    (info: PickingInfo, event?: HoverPointerEvent) => {
       onHover?.(info);
-      if (!info.picked || typeof info.x !== 'number' || typeof info.y !== 'number') {
+      // While panning/dragging, deck keeps firing hover events; the gesture is
+      // changing the view, not inspecting features, so suppress tooltip work.
+      if (isHoverDuringDrag(event)) {
         setHoverTooltip(null);
         return;
       }
-      const rawLayerId = typeof info.layer?.id === 'string' ? info.layer.id : '';
-      const normalizedLayerId = rawLayerId.replace(/-#.*#$/, '');
-      const featurePickEvent = renderer.getFeaturePickEvent(normalizedLayerId, {
-        index: info.index,
-        object: info.object,
-      });
-      if (featurePickEvent) {
-        onFeatureHover?.({
-          ...featurePickEvent,
-          coordinateSystem,
-          spatialData,
-          pickInfo: info,
+      if (info.picked && typeof info.x === 'number' && typeof info.y === 'number') {
+        const rawLayerId = typeof info.layer?.id === 'string' ? info.layer.id : '';
+        const normalizedLayerId = rawLayerId.replace(/-#.*#$/, '');
+        const featurePickEvent = renderer.getFeaturePickEvent(normalizedLayerId, {
+          index: info.index,
+          object: info.object,
         });
-      }
-      const shapePickEvent = renderer.getShapePickEvent(normalizedLayerId, {
-        index: info.index,
-        object: info.object,
-      });
-      if (shapePickEvent) {
-        onShapeHover?.({
-          ...shapePickEvent,
-          coordinateSystem,
-          pickInfo: info,
+        if (featurePickEvent) {
+          onFeatureHover?.({
+            ...featurePickEvent,
+            coordinateSystem,
+            spatialData,
+            pickInfo: info,
+          });
+        }
+        const shapePickEvent = renderer.getShapePickEvent(normalizedLayerId, {
+          index: info.index,
+          object: info.object,
         });
+        if (shapePickEvent) {
+          onShapeHover?.({
+            ...shapePickEvent,
+            coordinateSystem,
+            pickInfo: info,
+          });
+        }
       }
-      if (!shouldRenderInternalTooltip(renderTooltip)) {
-        return;
-      }
-      const tooltip = resolveHoverFeatureTooltip(info, renderer.getFeatureTooltip, {
-        aggregate: aggregateHoverTooltips,
-        deck: getDeckFromDeckGlRef(deckRef),
-        pickLayerIds: hoverPickLayerIds,
-      });
-      setHoverTooltip(tooltip);
+      resolveTooltip(info);
     },
-    [
-      aggregateHoverTooltips,
-      coordinateSystem,
-      hoverPickLayerIds,
-      onFeatureHover,
-      onHover,
-      onShapeHover,
-      renderTooltip,
-      renderer,
-      spatialData,
-    ]
+    [coordinateSystem, onFeatureHover, onHover, onShapeHover, renderer, resolveTooltip, spatialData]
   );
 
   const handleClick = useCallback(
@@ -551,20 +618,15 @@ function SpatialCanvasViewerInner({
     [measureRef]
   );
 
-  const viewerRect = viewerContainerRef.current?.getBoundingClientRect();
-  const tooltipClientPosition =
-    hoverTooltip && viewerRect
-      ? {
-          x: viewerRect.left + hoverTooltip.x,
-          y: viewerRect.top + hoverTooltip.y,
-        }
-      : null;
+  const tooltipClientPosition = hoverTooltip
+    ? { x: hoverTooltip.clientX, y: hoverTooltip.clientY }
+    : null;
 
-  const tooltipPayload: SpatialFeatureTooltipData | null =
-    hoverTooltip && tooltipClientPosition ? hoverTooltip : null;
+  const tooltipPayload: SpatialFeatureTooltipData | null = hoverTooltip;
 
   const portalTarget = typeof document !== 'undefined' ? (tooltipContainer ?? document.body) : null;
   const tooltipPortal =
+    hoverTooltipMode !== 'off' &&
     shouldRenderInternalTooltip(renderTooltip) &&
     tooltipPayload &&
     tooltipClientPosition &&
@@ -626,9 +688,9 @@ function SpatialCanvasViewerInner({
               layers={renderer.deckLayers}
               layerOrder={renderer.layerOrder}
               vivLayerProps={renderer.vivLayerProps.length > 0 ? renderer.vivLayerProps : undefined}
-              onHover={handleHover}
+              onHover={hoverTooltipMode === 'off' ? undefined : handleHover}
               onClick={handleClick}
-              deckProps={deckProps}
+              deckProps={mergedDeckProps}
               deckRef={deckRef}
             />
             {showLoadingOverlay && renderer.isBlocking && (
diff --git a/packages/vis/src/SpatialCanvas/featureTooltipHover.ts b/packages/vis/src/SpatialCanvas/featureTooltipHover.ts
index 91719899..4283f6e7 100644
--- a/packages/vis/src/SpatialCanvas/featureTooltipHover.ts
+++ b/packages/vis/src/SpatialCanvas/featureTooltipHover.ts
@@ -5,6 +5,18 @@ import type { DeckGLRef, PickingInfo } from 'deck.gl';
 const DEFAULT_PICK_RADIUS = 4;
 const DEFAULT_PICK_DEPTH = 12;
 
+/**
+ * Minimal shape of the deck.gl hover event (a mjolnir pointer event). `srcEvent`
+ * is the underlying DOM pointer event; its `buttons` bitmask is non-zero while a
+ * pointer button is held, which is how we detect an in-progress pan/drag.
+ */
+export type HoverPointerEvent = { srcEvent?: { buttons?: number } | null };
+
+/** True when the hover event fired while a pointer button is held (pan/drag). */
+export function isHoverDuringDrag(event?: HoverPointerEvent | null): boolean {
+  return (event?.srcEvent?.buttons ?? 0) !== 0;
+}
+
 export interface PickMultipleObjectsCapable {
   props?: {
     layers?: unknown;
@@ -181,15 +193,18 @@ function collectPicks(
       return picks;
     }
 
-    const supplementalPicks = missingLayerIds.flatMap((layerId) =>
-      deck.pickMultipleObjects({
-        x: info.x,
-        y: info.y,
-        radius: pickRadius,
-        depth: 1,
-        layerIds: resolveDeckPickLayerIds(deck, [layerId]),
-      })
-    );
+    // Most "missing" layers simply have no geometry under the cursor, so picking
+    // each one individually performs a wasted `readPixels` GPU round-trip per
+    // layer on every pointer move. Issue a single supplemental pick across all
+    // missing layers instead (depth covers one hit per layer) to recover the
+    // genuinely occluded ones without the per-layer readPixels storm.
+    const supplementalPicks = deck.pickMultipleObjects({
+      x: info.x,
+      y: info.y,
+      radius: pickRadius,
+      depth: missingLayerIds.length,
+      layerIds: resolveDeckPickLayerIds(deck, missingLayerIds),
+    });
     return supplementalPicks.length > 0 ? [...picks, ...supplementalPicks] : picks;
   }
   return [info];
diff --git a/packages/vis/src/SpatialCanvas/index.tsx b/packages/vis/src/SpatialCanvas/index.tsx
index c2545b8e..0306ec99 100644
--- a/packages/vis/src/SpatialCanvas/index.tsx
+++ b/packages/vis/src/SpatialCanvas/index.tsx
@@ -26,6 +26,8 @@ import { LabelsChannelPanel } from './LabelsChannelPanel';
 import { LayerOrderList } from './LayerOrderList';
 import { ShapeFillColorPanel } from './ShapeFillColorPanel';
 import {
+  type HoverTooltipMode,
+  isHoverTooltipMode,
   shouldAutoFitSpatialView,
   useSpatialCanvasRendererFromLayerInputs,
 } from './SpatialCanvasViewer';
@@ -38,11 +40,17 @@ import { SpatialViewer } from './SpatialViewer';
 import { TooltipFieldsPanel } from './TooltipFieldsPanel';
 import { VivLoaderRegistryProvider } from './VivLoaderRegistry';
 import { SpatialCanvasProvider, useSpatialCanvasActions, useSpatialCanvasStore } from './context';
-import { getDeckFromDeckGlRef, resolveHoverFeatureTooltip } from './featureTooltipHover';
-import type { SpatialCanvasStoreApi } from './stores';
+import {
+  type HoverPointerEvent,
+  getDeckFromDeckGlRef,
+  isHoverDuringDrag,
+  resolveHoverFeatureTooltip,
+} from './featureTooltipHover';
 import { layerConfig } from './layerConfig';
+import type { SpatialCanvasStoreApi } from './stores';
 import type { AvailableElement, ElementsByType, ViewState } from './types';
 import type { ImageLayerConfig } from './useLayerData';
+import { type ViewInteractionState, useViewInteractionGate } from './useViewInteractionGate';
 import { generateLayerId, getAllCoordinateSystems } from './utils';
 
 // ============================================
@@ -217,7 +225,8 @@ interface ViewerSectionProps {
   getWorldBoundsForVisibleLayers: () => import('@spatialdata/core').AxisAlignedBounds | null;
   vw: number;
   vh: number;
-  onHover: (info: PickingInfo) => void;
+  onHover?: (info: PickingInfo, event?: HoverPointerEvent) => void;
+  onInteractionStateChange: (state: ViewInteractionState) => void;
   coordinateSystem: string | null;
   deckRef: React.RefObject<DeckGLRef | null>;
 }
@@ -234,9 +243,11 @@ function ViewerSection({
   vw,
   vh,
   onHover,
+  onInteractionStateChange,
   coordinateSystem,
   deckRef,
 }: ViewerSectionProps) {
+  const deckProps = useMemo(() => ({ onInteractionStateChange }), [onInteractionStateChange]);
   const viewState = useSpatialCanvasStore((s) => s.viewState);
   const actions = useSpatialCanvasActions();
 
@@ -300,6 +311,7 @@ function ViewerSection({
         layerOrder={layerOrder}
         vivLayerProps={vivLayerProps.length > 0 ? vivLayerProps : undefined}
         onHover={onHover}
+        deckProps={deckProps}
         deckRef={deckRef}
       />
       {isBlocking && (
@@ -362,28 +374,33 @@ interface SpatialCanvasInnerProps {
   /** Override default tooltip UI; receives pick position in viewport coordinates. */
   renderTooltip?: (props: SpatialCanvasTooltipRenderProps) => ReactNode;
   /**
-   * When true (default), hover tooltips include picks from all layers under the cursor.
+   * Initial hover tooltip mode (`'off'` | `'simple'` | `'aggregate'`). The UI
+   * exposes a selector to change it live; this sets the starting value.
    */
-  aggregateHoverTooltips?: boolean;
+  hoverTooltipMode?: HoverTooltipMode;
 }
 
 function SpatialCanvasInner({
   tooltipContainer,
   renderTooltip,
-  aggregateHoverTooltips = true,
+  hoverTooltipMode = 'simple',
 }: SpatialCanvasInnerProps) {
   const { spatialData, loading: sdLoading } = useSpatialData();
+  const [tooltipMode, setTooltipMode] = useState<HoverTooltipMode>(hoverTooltipMode);
   const [measureRef, { width, height }] = useMeasure();
   const shellRef = useRef<HTMLDivElement | null>(null);
   const viewerContainerRef = useRef<HTMLDivElement | null>(null);
   const deckRef = useRef<DeckGLRef | null>(null);
   const [fullscreen, setFullscreen] = useState(false);
-  const [pendingFullscreenRefitSize, setPendingFullscreenRefitSize] = useState<{
+  // A one-shot request to refit the view after a fullscreen toggle changes the
+  // container size. Stored in a ref (not state) so consuming it in the resize
+  // effect doesn't require a setState-in-effect.
+  const pendingFullscreenRefitSizeRef = useRef<{
     width: number;
     height: number;
   } | null>(null);
   const [hoverTooltip, setHoverTooltip] = useState<
-    (SpatialFeatureTooltipData & { x: number; y: number }) | null
+    (SpatialFeatureTooltipData & { x: number; y: number; clientX: number; clientY: number }) | null
   >(null);
 
   const coordinateSystem = useSpatialCanvasStore((s) => s.coordinateSystem);
@@ -402,6 +419,12 @@ function SpatialCanvasInner({
 
   const vw = width ?? 0;
   const vh = height ?? 0;
+  // Disable shape picking while the camera is being panned/zoomed. `interacting`
+  // flips at most twice per gesture (start/settle), so this hook re-runs to
+  // rebuild layers with toggled pickability — not on every pan frame.
+  const { interacting, onInteractionStateChange } = useViewInteractionGate();
+  // Shapes are pickable unless tooltips are off or the camera is being moved.
+  const pickingEnabled = tooltipMode !== 'off' && !interacting;
   const {
     availableElements,
     deckLayers,
@@ -426,17 +449,19 @@ function SpatialCanvasInner({
     // are managed entirely by ViewerSection so this hook never re-runs on pan.
     width: vw,
     height: vh,
+    pickingEnabled,
   });
   const hoverPickLayerIds = useMemo(() => Array.from(enabledLayerIds), [enabledLayerIds]);
 
   useEffect(() => {
+    const pending = pendingFullscreenRefitSizeRef.current;
     if (
-      !pendingFullscreenRefitSize ||
+      !pending ||
       !hasEnabledLayers ||
       vw <= 0 ||
       vh <= 0 ||
       isBlocking ||
-      (vw === pendingFullscreenRefitSize.width && vh === pendingFullscreenRefitSize.height)
+      (vw === pending.width && vh === pending.height)
     ) {
       return;
     }
@@ -446,16 +471,8 @@ function SpatialCanvasInner({
       ? viewStateFromBounds(bounds, vw, vh)
       : { target: [0, 0] as [number, number], zoom: 0 };
     actions.setViewState(next);
-    setPendingFullscreenRefitSize(null);
-  }, [
-    actions,
-    getWorldBoundsForVisibleLayers,
-    hasEnabledLayers,
-    isBlocking,
-    pendingFullscreenRefitSize,
-    vh,
-    vw,
-  ]);
+    pendingFullscreenRefitSizeRef.current = null;
+  }, [actions, getWorldBoundsForVisibleLayers, hasEnabledLayers, isBlocking, vh, vw]);
 
   useEffect(() => {
     actions.reset();
@@ -528,16 +545,49 @@ function SpatialCanvasInner({
       return columnName !== tableKeys.instanceKey && columnName !== tableKeys.regionKey;
     }) ?? [];
 
-  const handleHover = useCallback(
+  // The expensive part of hovering: aggregate-pick the feature(s) under the
+  // cursor and position the tooltip. Throttled to one run per animation frame.
+  const resolveTooltip = useCallback(
     (info: PickingInfo) => {
-      const tooltip = resolveHoverFeatureTooltip(info, getFeatureTooltip, {
-        aggregate: aggregateHoverTooltips,
-        deck: getDeckFromDeckGlRef(deckRef),
-        pickLayerIds: hoverPickLayerIds,
+      if (tooltipMode === 'off') {
+        setHoverTooltip(null);
+        return;
+      }
+      const tooltip =
+        info.picked && typeof info.x === 'number' && typeof info.y === 'number'
+          ? resolveHoverFeatureTooltip(info, getFeatureTooltip, {
+              aggregate: tooltipMode === 'aggregate',
+              deck: getDeckFromDeckGlRef(deckRef),
+              pickLayerIds: hoverPickLayerIds,
+            })
+          : null;
+      // Resolve viewport coordinates here (in the event handler) rather than
+      // reading the container ref during render.
+      if (!tooltip) {
+        setHoverTooltip(null);
+        return;
+      }
+      const rect = viewerContainerRef.current?.getBoundingClientRect();
+      setHoverTooltip({
+        ...tooltip,
+        clientX: (rect?.left ?? 0) + tooltip.x,
+        clientY: (rect?.top ?? 0) + tooltip.y,
       });
-      setHoverTooltip(tooltip);
     },
-    [aggregateHoverTooltips, getFeatureTooltip, hoverPickLayerIds]
+    [tooltipMode, getFeatureTooltip, hoverPickLayerIds]
+  );
+
+  const handleHover = useCallback(
+    (info: PickingInfo, event?: HoverPointerEvent) => {
+      // While panning/dragging, deck keeps firing hover events; the gesture is
+      // changing the view, not inspecting features, so suppress tooltip work.
+      if (isHoverDuringDrag(event)) {
+        setHoverTooltip(null);
+        return;
+      }
+      resolveTooltip(info);
+    },
+    [resolveTooltip]
   );
 
   const handleViewerRef = useCallback(
@@ -574,22 +624,17 @@ function SpatialCanvasInner({
   }
 
   const hasElements = Object.values(availableElements).some((arr) => arr.length > 0);
-  const viewerRect = viewerContainerRef.current?.getBoundingClientRect();
   /** Viewport coordinates of the deck.gl pick (for portaled `position: fixed` tooltip). */
-  const tooltipClientPosition =
-    hoverTooltip && viewerRect
-      ? {
-          x: viewerRect.left + hoverTooltip.x,
-          y: viewerRect.top + hoverTooltip.y,
-        }
-      : null;
+  const tooltipClientPosition = hoverTooltip
+    ? { x: hoverTooltip.clientX, y: hoverTooltip.clientY }
+    : null;
 
   const shellStyle: CSSProperties = fullscreen
     ? { ...containerStyle, ...fullscreenOverlayStyle, position: 'fixed' }
     : { ...containerStyle, position: 'relative' };
 
   const tooltipPayload: SpatialFeatureTooltipData | null =
-    hoverTooltip && tooltipClientPosition ? hoverTooltip : null;
+    tooltipMode !== 'off' && hoverTooltip && tooltipClientPosition ? hoverTooltip : null;
 
   const portalTarget = typeof document !== 'undefined' ? (tooltipContainer ?? document.body) : null;
 
@@ -629,11 +674,26 @@ function SpatialCanvasInner({
                 </option>
               ))}
             </select>
+            <label style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+              <span style={{ color: '#999', fontSize: '12px' }}>Tooltips:</span>
+              <select
+                style={selectStyle}
+                value={tooltipMode}
+                onChange={(e) => {
+                  if (isHoverTooltipMode(e.target.value)) setTooltipMode(e.target.value);
+                }}
+                title="Off disables shape picking entirely (fastest); Aggregate picks all layers under the cursor (slowest)."
+              >
+                <option value="off">Off</option>
+                <option value="simple">Simple</option>
+                <option value="aggregate">Aggregate</option>
+              </select>
+            </label>
             <button
               type="button"
               style={{ ...selectStyle, marginLeft: 'auto', cursor: 'pointer' }}
               onClick={() => {
-                setPendingFullscreenRefitSize({ width: vw, height: vh });
+                pendingFullscreenRefitSizeRef.current = { width: vw, height: vh };
                 setFullscreen((f) => !f);
               }}
             >
@@ -682,7 +742,8 @@ function SpatialCanvasInner({
               getWorldBoundsForVisibleLayers={getWorldBoundsForVisibleLayers}
               vw={vw}
               vh={vh}
-              onHover={handleHover}
+              onHover={tooltipMode === 'off' ? undefined : handleHover}
+              onInteractionStateChange={onInteractionStateChange}
               coordinateSystem={coordinateSystem}
               deckRef={deckRef}
             />
@@ -866,9 +927,10 @@ export interface SpatialCanvasProps {
    */
   renderTooltip?: (props: SpatialCanvasTooltipRenderProps) => ReactNode;
   /**
-   * When true (default), hover tooltips aggregate picks from all layers under the cursor.
+   * Initial hover tooltip mode: `'off'` | `'simple'` (default) | `'aggregate'`.
+   * The canvas UI exposes a selector to change it live. See {@link HoverTooltipMode}.
    */
-  aggregateHoverTooltips?: boolean;
+  hoverTooltipMode?: HoverTooltipMode;
 }
 
 /**
@@ -923,7 +985,7 @@ export default function SpatialCanvas({
   store,
   tooltipContainer,
   renderTooltip,
-  aggregateHoverTooltips,
+  hoverTooltipMode,
 }: SpatialCanvasProps) {
   return (
     <VivLoaderRegistryProvider>
@@ -931,7 +993,7 @@ export default function SpatialCanvas({
         <SpatialCanvasInner
           tooltipContainer={tooltipContainer}
           renderTooltip={renderTooltip}
-          aggregateHoverTooltips={aggregateHoverTooltips}
+          hoverTooltipMode={hoverTooltipMode}
         />
       </SpatialCanvasProvider>
     </VivLoaderRegistryProvider>
diff --git a/packages/vis/src/SpatialCanvas/public.ts b/packages/vis/src/SpatialCanvas/public.ts
index eb53cd37..fc2fd24b 100644
--- a/packages/vis/src/SpatialCanvas/public.ts
+++ b/packages/vis/src/SpatialCanvas/public.ts
@@ -29,6 +29,7 @@ export {
   useSpatialCanvasRendererFromLayerInputs,
 } from './SpatialCanvasViewer';
 export type {
+  HoverTooltipMode,
   VivImageExtensionResolver,
   VivImageLayerContext,
   VivImagePropsResolver,
diff --git a/packages/vis/src/SpatialCanvas/renderers/shapesRenderer.ts b/packages/vis/src/SpatialCanvas/renderers/shapesRenderer.ts
index 370fb64e..82ab495c 100644
--- a/packages/vis/src/SpatialCanvas/renderers/shapesRenderer.ts
+++ b/packages/vis/src/SpatialCanvas/renderers/shapesRenderer.ts
@@ -64,6 +64,12 @@ export interface ShapesLayerRenderConfig {
    * layer assembly skips Record→Map conversion on every `getLayers()` call.
    */
   featureStateRuntime?: ShapeFeatureStateRuntime;
+  /**
+   * When false, render the layer non-pickable (autoHighlight + hover picking
+   * off). Used to disable shape picking while the camera is moving. Defaults to
+   * true.
+   */
+  pickingEnabled?: boolean;
 }
 
 /**
@@ -88,6 +94,7 @@ export function renderShapesLayer(config: ShapesLayerRenderConfig): Layer | null
     featureStateRuntime,
     renderData,
     prebuilt,
+    pickingEnabled,
   } = config;
 
   if (!visible) return null;
@@ -114,6 +121,7 @@ export function renderShapesLayer(config: ShapesLayerRenderConfig): Layer | null
       visible,
       opacity,
       modelMatrix,
+      pickingEnabled,
     },
     prebuilt
   );
diff --git a/packages/vis/src/SpatialCanvas/useLayerData.ts b/packages/vis/src/SpatialCanvas/useLayerData.ts
index 01976df3..74703186 100644
--- a/packages/vis/src/SpatialCanvas/useLayerData.ts
+++ b/packages/vis/src/SpatialCanvas/useLayerData.ts
@@ -65,10 +65,16 @@ import { createImageLoader } from './renderers/imageRenderer';
 import { renderLabelsLayer } from './renderers/labelsRenderer';
 import { type PointData, renderPointsLayer } from './renderers/pointsRenderer';
 import { loadShapesData, renderShapesLayer } from './renderers/shapesRenderer';
-import type { AvailableElement, ChannelConfig, ElementsByType, LayerConfig, ShapesLayerConfig } from './types';
+import type {
+  AvailableElement,
+  ChannelConfig,
+  ElementsByType,
+  LayerConfig,
+  ShapesLayerConfig,
+} from './types';
 import {
-  mergeVivImagePassthroughProps,
   type VivImagePassthroughOptions,
+  mergeVivImagePassthroughProps,
 } from './vivImagePassthrough';
 
 export interface ImageLoaderData {
@@ -191,7 +197,7 @@ export type SpatialFeaturePickEventData = ShapeFeaturePickEventData | LabelFeatu
 
 interface UseLayerDataResult {
   /** Get deck.gl layers ready for rendering (shapes, points, etc.) */
-  getLayers: () => Layer[];
+  getLayers: (options?: { pickingEnabled?: boolean }) => Layer[];
   /** Get Viv layer props for image layers */
   getVivLayerProps: () => ImageLayerConfig[];
   /** Raw loaded image pipeline data (defaults) for the properties UI */
@@ -480,7 +486,16 @@ export function useLayerData(
     Map<string, { signature: string; runtime: ShapeFeatureStateRuntime }>
   >(new Map());
 
+  // Mirror the latest `layers` into a ref. This is read both by async loaders
+  // (which run well after commit) AND synchronously during render by
+  // `hasRenderableLayerData` / the loaded-data getters consumed via context
+  // (e.g. the "Center on layer" button's enablement, image/labels panels). It
+  // must therefore be written during render, not in an effect: deferring it to a
+  // commit-phase effect lets those render-time readers observe a stale config on
+  // the render where a layer first appears, leaving derived UI (the Center
+  // button) wrongly disabled with no follow-up render to correct it.
   const layersRef = useRef(layers);
+  // eslint-disable-next-line react-hooks/refs -- intentional latest-`layers` mirror consumed during render, see comment above
   layersRef.current = layers;
 
   const [layerLoadStates, setLayerLoadStates] = useState<Record<string, LayerLoadState>>({});
@@ -490,18 +505,25 @@ export function useLayerData(
     setLoadedDataRevision((revision) => revision + 1);
   }, []);
 
-  // Build a map of element key -> AvailableElement for quick lookup
-  const elementMap = useRef<Map<string, AvailableElement>>(new Map());
-
-  useEffect(() => {
+  // Build a map of element key -> AvailableElement for quick lookup. Memoised so it
+  // only rebuilds when `availableElements` changes...
+  const elementMapValue = useMemo(() => {
     const map = new Map<string, AvailableElement>();
     for (const type of ['images', 'shapes', 'points', 'labels'] as const) {
       for (const elem of availableElements[type]) {
         map.set(`${elem.type}:${elem.key}`, elem);
       }
     }
-    elementMap.current = map;
+    return map;
   }, [availableElements]);
+  // ...and mirrored into a stable ref so render-time consumers (e.g. the "Center on
+  // layer" enablement via `hasRenderableLayerData`) and async loaders read the
+  // current map without adding it — and its identity churn — to every dependency
+  // array. Written during render, NOT in an effect: an effect-deferred write let
+  // render-time readers observe a commit-stale map, which left the button disabled.
+  const elementMap = useRef(elementMapValue);
+  // eslint-disable-next-line react-hooks/refs -- intentional synchronous latest-value mirror consumed during render, see comment above
+  elementMap.current = elementMapValue;
 
   const setLayerResourceStatus = useCallback(
     (layerId: string, resource: keyof LayerLoadState, status: ResourceLoadStatus) => {
@@ -1213,7 +1235,11 @@ export function useLayerData(
     return unionBoundsList(list);
   }, [layerOrder, layers, getWorldBoundsForLayer]);
 
-  const getLayers = useCallback((): Layer[] => {
+  const getLayers = useCallback((options?: { pickingEnabled?: boolean }): Layer[] => {
+    // When the camera is moving we disable shape picking (autoHighlight + hover)
+    // to avoid deck re-rendering the full shape geometry into the picking buffer
+    // on every pointer move. Defaults to enabled.
+    const pickingEnabled = options?.pickingEnabled ?? true;
     const deckLayers: Layer[] = [];
     const loaded = loadedDataRef.current;
 
@@ -1247,6 +1273,7 @@ export function useLayerData(
             ),
             renderData: shapeData.renderData,
             prebuilt: loaded.shapePrebuiltData.get(layerId)?.prebuilt,
+            pickingEnabled,
           });
           if (layer) deckLayers.push(layer);
         }
@@ -1321,9 +1348,12 @@ export function useLayerData(
     return loadedDataRef.current.images.get(elem.key);
   }, []);
 
-  const getImageLoadedDataByElementKey = useCallback((elementKey: string): ImageLoaderData | undefined => {
-    return loadedDataRef.current.images.get(elementKey);
-  }, []);
+  const getImageLoadedDataByElementKey = useCallback(
+    (elementKey: string): ImageLoaderData | undefined => {
+      return loadedDataRef.current.images.get(elementKey);
+    },
+    []
+  );
 
   const getLabelsLayerLoadedData = useCallback((layerId: string): LabelsLoaderData | undefined => {
     const elem = resolveLayerElement(layerId, layersRef.current[layerId], elementMap.current);
@@ -1613,6 +1643,16 @@ export function useLayerData(
 
   const isBlocking = useMemo(
     () =>
+      // `hasRenderableLayerData` consults `loadedDataRef`, an imperatively
+      // maintained cache of already-loaded layer data. Reading it during render
+      // is intentional here: the blocking overlay must distinguish a layer that
+      // is loading for the first time (block) from one that is refreshing but
+      // already has data to show (don't block), and that distinction only lives
+      // in the cache. Freshness is guaranteed because `layerLoadStates` (a real
+      // state value in this memo's deps) changes in lockstep with every load,
+      // forcing this memo to recompute. Lifting the cache to state/useSyncExternalStore
+      // would satisfy the rule but defeats the performance reason the ref exists.
+      // eslint-disable-next-line react-hooks/refs -- intentional external-store read, see comment above
       layerOrder.some((layerId) => {
         const config = layers[layerId];
         if (!config?.visible) return false;
diff --git a/packages/vis/src/SpatialCanvas/useViewInteractionGate.ts b/packages/vis/src/SpatialCanvas/useViewInteractionGate.ts
new file mode 100644
index 00000000..b30d767c
--- /dev/null
+++ b/packages/vis/src/SpatialCanvas/useViewInteractionGate.ts
@@ -0,0 +1,61 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/** Minimal shape of deck.gl's interaction state (a subset of `InteractionState`). */
+export interface ViewInteractionState {
+  isDragging?: boolean;
+  isPanning?: boolean;
+  isZooming?: boolean;
+  inTransition?: boolean;
+}
+
+export interface ViewInteractionGate {
+  /** True while the camera is being panned/zoomed (or settling within the idle delay). */
+  interacting: boolean;
+  /** Wire to deck.gl's `onInteractionStateChange` (e.g. via `deckProps`). */
+  onInteractionStateChange: (state: ViewInteractionState) => void;
+}
+
+/**
+ * Tracks whether the deck.gl view is being actively manipulated, with the
+ * transition back to idle debounced by `idleDelayMs`.
+ *
+ * Picking large shape layers is expensive: deck re-renders the full geometry
+ * into the picking framebuffer on every pointer move to service hover /
+ * autoHighlight. Disabling shape picking while `interacting` is true removes that
+ * per-move cost during pan/zoom; the debounce avoids re-enabling (and paying a
+ * picking pass) in the gaps between rapid drag steps.
+ */
+export function useViewInteractionGate(idleDelayMs = 150): ViewInteractionGate {
+  const [interacting, setInteracting] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const onInteractionStateChange = useCallback(
+    (state: ViewInteractionState) => {
+      const active = Boolean(
+        state && (state.isDragging || state.isPanning || state.isZooming || state.inTransition)
+      );
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+      if (active) {
+        setInteracting(true);
+      } else {
+        timerRef.current = setTimeout(() => {
+          timerRef.current = null;
+          setInteracting(false);
+        }, idleDelayMs);
+      }
+    },
+    [idleDelayMs]
+  );
+
+  useEffect(
+    () => () => {
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+    },
+    []
+  );
+
+  return { interacting, onInteractionStateChange };
+}
diff --git a/packages/vis/src/Table/index.tsx b/packages/vis/src/Table/index.tsx
index 4cc58869..681e0ffe 100644
--- a/packages/vis/src/Table/index.tsx
+++ b/packages/vis/src/Table/index.tsx
@@ -10,14 +10,23 @@ export default function TableComponent() {
   const table = useMemo(() => {
     return spatialData?.tables?.[selectedTable];
   }, [selectedTable, spatialData?.tables]);
-  const [tableData, setTableData] = useState<any>(undefined);
+  // Keep the resolved data tagged with the table it came from so stale data is
+  // hidden by deriving during render rather than clearing via setState-in-effect.
+  type AnnDataResult = Awaited<ReturnType<NonNullable<typeof table>['getAnnDataJS']>>;
+  const [tableData, setTableData] = useState<
+    { table: unknown; data: AnnDataResult } | undefined
+  >(undefined);
   useEffect(() => {
-    if (table) {
-      table.getAnnDataJS().then((t) => setTableData(t));
-    } else {
-      setTableData(undefined);
-    }
+    if (!table) return;
+    let cancelled = false;
+    table.getAnnDataJS().then((t) => {
+      if (!cancelled) setTableData({ table, data: t });
+    });
+    return () => {
+      cancelled = true;
+    };
   }, [table]);
+  const currentData = tableData && tableData.table === table ? tableData.data : undefined;
   return (
     <div>
       {spatialData?.tables && (
@@ -29,7 +38,7 @@ export default function TableComponent() {
           ))}
         </select>
       )}
-      {tableData && <JsonView value={tableData} style={darkTheme} />}
+      {currentData && <JsonView value={currentData} style={darkTheme} />}
     </div>
   );
 }
diff --git a/packages/vis/src/Transforms/index.tsx b/packages/vis/src/Transforms/index.tsx
index 961ebed8..6734696b 100644
--- a/packages/vis/src/Transforms/index.tsx
+++ b/packages/vis/src/Transforms/index.tsx
@@ -1,8 +1,8 @@
+import type { SpatialElement } from '@spatialdata/core';
 import { useSpatialData } from '@spatialdata/react';
 import JsonView from '@uiw/react-json-view';
 import { darkTheme } from '@uiw/react-json-view/dark';
-import { useEffect, useMemo, useState } from 'react';
-import type { SpatialElement } from '@spatialdata/core';
+import { useMemo, useState } from 'react';
 
 const SPATIAL_ELEMENT_TYPES = ['images', 'labels', 'shapes', 'points'] as const;
 type SpatialElementType = (typeof SPATIAL_ELEMENT_TYPES)[number];
@@ -40,10 +40,19 @@ export default function TransformsComponent() {
     return entries;
   }, [spatialData]);
 
+  // Default to the first element when the user hasn't picked one (or their pick
+  // is no longer available). Derived during render instead of synced via effect.
+  const effectiveElementId = useMemo(() => {
+    if (selectedElementId && allElements.some((e) => getElementId(e) === selectedElementId)) {
+      return selectedElementId;
+    }
+    return allElements[0] ? getElementId(allElements[0]) : '';
+  }, [allElements, selectedElementId]);
+
   // Find currently selected element
   const selectedEntry = useMemo(() => {
-    return allElements.find((e) => getElementId(e) === selectedElementId);
-  }, [allElements, selectedElementId]);
+    return allElements.find((e) => getElementId(e) === effectiveElementId);
+  }, [allElements, effectiveElementId]);
 
   // Get coordinate systems for selected element
   const coordinateSystems = useMemo(() => {
@@ -51,30 +60,17 @@ export default function TransformsComponent() {
     return selectedEntry.element.coordinateSystems;
   }, [selectedEntry]);
 
-  // Default to first element when data loads or changes
-  useEffect(() => {
-    if (
-      allElements.length > 0 &&
-      (!selectedElementId || !allElements.find((e) => getElementId(e) === selectedElementId))
-    ) {
-      setSelectedElementId(getElementId(allElements[0]));
-    }
-  }, [allElements, selectedElementId]);
-
-  // Default to first coordinate system when element changes
-  useEffect(() => {
-    if (coordinateSystems.length > 0 && (!selectedCS || !coordinateSystems.includes(selectedCS))) {
-      setSelectedCS(coordinateSystems[0]);
-    } else if (coordinateSystems.length === 0) {
-      setSelectedCS('');
-    }
+  // Default to the first coordinate system, derived the same way.
+  const effectiveCS = useMemo(() => {
+    if (selectedCS && coordinateSystems.includes(selectedCS)) return selectedCS;
+    return coordinateSystems[0] ?? '';
   }, [coordinateSystems, selectedCS]);
 
   // Get transformation result
   const transformData = useMemo(() => {
-    if (!selectedEntry || !selectedCS) return null;
+    if (!selectedEntry || !effectiveCS) return null;
 
-    const result = selectedEntry.element.getTransformation(selectedCS);
+    const result = selectedEntry.element.getTransformation(effectiveCS);
     if (result.ok) {
       const t = result.value;
       return {
@@ -90,7 +86,7 @@ export default function TransformsComponent() {
       error: result.error.message,
       availableCoordinateSystems: result.error.availableCoordinateSystems,
     };
-  }, [selectedEntry, selectedCS]);
+  }, [selectedEntry, effectiveCS]);
 
   if (loading) return <div>Loading...</div>;
   if (error) return <div>Error: {error.message}</div>;
@@ -104,7 +100,7 @@ export default function TransformsComponent() {
         <label style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
           <span>Element:</span>
           <select
-            value={selectedElementId}
+            value={effectiveElementId}
             onChange={(e) => setSelectedElementId(e.target.value)}
             style={{ minWidth: '200px' }}
           >
@@ -123,7 +119,7 @@ export default function TransformsComponent() {
         <label style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
           <span>Coordinate System:</span>
           <select
-            value={selectedCS}
+            value={effectiveCS}
             onChange={(e) => setSelectedCS(e.target.value)}
             disabled={coordinateSystems.length === 0}
             style={{ minWidth: '150px' }}
diff --git a/packages/vis/src/index.ts b/packages/vis/src/index.ts
index a572d0c8..b0552858 100644
--- a/packages/vis/src/index.ts
+++ b/packages/vis/src/index.ts
@@ -74,6 +74,7 @@ export type {
   SpatialViewerProps,
   SpatialCanvasViewerProps,
   SpatialCanvasViewerRenderTooltip,
+  HoverTooltipMode,
   LabelsSpatialFeaturePickEvent,
   ShapesSpatialFeaturePickEvent,
   SpatialFeaturePickEvent,
diff --git a/packages/vis/tests/featureTooltipHover.spec.ts b/packages/vis/tests/featureTooltipHover.spec.ts
index e892c256..83f271e5 100644
--- a/packages/vis/tests/featureTooltipHover.spec.ts
+++ b/packages/vis/tests/featureTooltipHover.spec.ts
@@ -1,13 +1,29 @@
 import { describe, expect, it, vi } from 'vitest';
 import {
   getAggregateHoverPickDepth,
+  isHoverDuringDrag,
   normalizeDeckLayerId,
   resolveDeckPickLayerIds,
   resolveHoverFeatureTooltip,
 } from '../src/SpatialCanvas/featureTooltipHover.js';
 
-const LABELS_BITMASK_LAYER_ID =
-  'sub-layer-0-0-0-0,512,512,0-labels:mask-#spatial-view#-labels';
+describe('isHoverDuringDrag', () => {
+  it('treats a hover with no held button as a normal hover', () => {
+    expect(isHoverDuringDrag(undefined)).toBe(false);
+    expect(isHoverDuringDrag(null)).toBe(false);
+    expect(isHoverDuringDrag({})).toBe(false);
+    expect(isHoverDuringDrag({ srcEvent: null })).toBe(false);
+    expect(isHoverDuringDrag({ srcEvent: { buttons: 0 } })).toBe(false);
+  });
+
+  it('treats a hover with a held pointer button as an in-progress drag/pan', () => {
+    expect(isHoverDuringDrag({ srcEvent: { buttons: 1 } })).toBe(true);
+    expect(isHoverDuringDrag({ srcEvent: { buttons: 2 } })).toBe(true);
+    expect(isHoverDuringDrag({ srcEvent: { buttons: 4 } })).toBe(true);
+  });
+});
+
+const LABELS_BITMASK_LAYER_ID = 'sub-layer-0-0-0-0,512,512,0-labels:mask-#spatial-view#-labels';
 
 describe('featureTooltipHover', () => {
   it('normalizes viv-suffixed deck layer ids', () => {
@@ -347,6 +363,47 @@ describe('featureTooltipHover', () => {
     );
   });
 
+  it('recovers multiple occluded layers with a single batched supplemental pick', () => {
+    const getFeatureTooltip = vi.fn((layerId: string) => ({
+      elementKey: layerId,
+      elementType: 'shapes' as const,
+      layerId,
+      items: [{ label: 'element', value: layerId }],
+    }));
+    // First (aggregate) pass sees only shapes:a; shapes:b and shapes:c are
+    // "missing" and must be recovered without one readPixels per missing layer.
+    const pickMultipleObjects = vi.fn(({ layerIds }: { layerIds?: string[] }) => {
+      if (layerIds && layerIds.length === 3) {
+        return [{ picked: true, x: 10, y: 20, layer: { id: 'shapes:a' }, index: 0, object: {} }];
+      }
+      return [
+        { picked: true, x: 10, y: 20, layer: { id: 'shapes:b' }, index: 0, object: {} },
+        { picked: true, x: 10, y: 20, layer: { id: 'shapes:c' }, index: 0, object: {} },
+      ];
+    });
+
+    const result = resolveHoverFeatureTooltip(
+      { picked: true, x: 10, y: 20, layer: { id: 'shapes:a' }, index: 0, object: {} },
+      getFeatureTooltip,
+      {
+        deck: { pickMultipleObjects },
+        pickLayerIds: ['shapes:a', 'shapes:b', 'shapes:c'],
+      }
+    );
+
+    // One aggregate pass + one batched supplemental pass = 2 total (not 1 per
+    // missing layer).
+    expect(pickMultipleObjects).toHaveBeenCalledTimes(2);
+    expect(pickMultipleObjects).toHaveBeenLastCalledWith({
+      x: 10,
+      y: 20,
+      radius: 4,
+      depth: 2,
+      layerIds: ['shapes:b', 'shapes:c'],
+    });
+    expect(result?.sections).toHaveLength(3);
+  });
+
   it('falls back to the original hover pick when filtered aggregation returns no picks', () => {
     const getFeatureTooltip = vi.fn(() => ({
       elementKey: 'cells',
diff --git a/packages/vis/vite.config.demo.ts b/packages/vis/vite.config.demo.ts
index 77894c06..34c9e04a 100644
--- a/packages/vis/vite.config.demo.ts
+++ b/packages/vis/vite.config.demo.ts
@@ -29,8 +29,11 @@ export default defineConfig({
   assetsInclude: ['**/*.wasm'],
   server: {
     host: '127.0.0.1',
-    port: 5173,
-    strictPort: true,
+    // Prefer 5173 but fall back to the next free port when it's taken (e.g. another
+    // dev server is already running). Honours the PORT env var when set, so a
+    // launcher can pin the port. `strictPort` stays off so the fallback can happen.
+    port: Number(process.env.PORT) || 5173,
+    strictPort: false,
     open: false,
     proxy: {
       '/test-fixtures': {