Optimize hover performance for large datasets (50+ areas)

[Copilot]

Hovering over constituencies shows noticeable lag when visualizing 50+ areas. The delay manifests as a visible pause when moving the cursor between adjacent features.

Changes

Remove debounce delay

• Eliminated 100ms debounce on hover area updates
• Removed redundant debouncedHoverArea state variable

Memoize expensive computations

• Cache Mapbox expression evaluations for area colors using useMemo with Map-based lookup
• Memoize areasToDisplay array to prevent invalidating color cache on unrelated renders

Optimize feature state updates

• Skip map feature state updates when hovering within the same feature (previously updated on every mousemove)

// Before: Expression evaluated on every render for every area
const getAreaColor = (area) => {
  const colorResult = fillColorExpression.evaluate(/* ... */);
  return toRGBA(colorResult);
};

// After: Memoized, evaluated once per area when dependencies change
const areaColors = useMemo(() => {
  const colors = new Map();
  for (const area of areasToDisplay) {
    colors.set(areaKey, toRGBA(fillColorExpression.evaluate(/* ... */)));
  }
  return colors;
}, [areasToDisplay, areaStats, fillColorExpression, result]);

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.