Improve performance on election map

src/components/ElectionMap.js

@@ -9,6 +9,7 @@ import {
 import { SvgChart, helper } from "d3kit"
 import { createComponent } from "react-d3kit"
 import { parties } from "../models/information"
+import { memo } from "react"
 const maps = require("../models/information/_map.json")
 
 const partyLookup = keyBy(parties, p => p.id)
@@ -293,6 +294,6 @@ class ElectionMap extends SvgChart {
   }
 }
 
-export default /** @type {React.FunctionComponent<Props>} */ (createComponent(
-  ElectionMap
+export default /** @type {React.FunctionComponent<Props>} */ (memo(
+  createComponent(ElectionMap)
 ))

src/components/ElectionMapContainer.js

@@ -1,5 +1,5 @@
 import ElectionMap from "./ElectionMap"
-import { useState, useEffect } from "react"
+import { useState, useEffect, useMemo, useCallback } from "react"
 import { zones, parties } from "../models/information"
 import React from "react"
 import _ from "lodash"
@@ -53,8 +53,21 @@ function getMapData(summaryState) {
 export default function ElectionMapContainer() {
   const summaryState = useSummaryData()
   const [mapTip, setMapTip] = useState(null)
-  const mapZones = getMapData(summaryState)
+  const mapZones = useMemo(() => getMapData(summaryState), [summaryState])
 
+  const onInit = useCallback(map => {}, [])
+  const onZoneMouseenter = useCallback((zone, mouseEvent) => {
+    setMapTip({ zone, mouseEvent })
+  }, [])
+  const onZoneMousemove = useCallback((zone, mouseEvent) => {
+    setMapTip({ zone, mouseEvent })
+  }, [])
+  const onZoneMouseleave = useCallback((zone, mouseEvent) => {
+    setMapTip(null)
+  }, [])
+  const onZoneClick = useCallback(zone => {
+    console.log(zone)
+  }, [])
   return (
     <div>
       {mapTip && (
@@ -79,24 +92,11 @@ export default function ElectionMapContainer() {
       )}
       <ElectionMap
         data={mapZones}
-        onInit={map => {
-          // console.log('map', map);
-        }}
-        onZoneMouseenter={(zone, mouseEvent) => {
-          setMapTip({ zone, mouseEvent })
-          // console.log('zone', zone);
-        }}
-        onZoneMousemove={(zone, mouseEvent) => {
-          setMapTip({ zone, mouseEvent })
-          // console.log('zone', zone);
-        }}
-        onZoneMouseleave={(zone, mouseEvent) => {
-          setMapTip(null)
-          // console.log('zone', zone);
-        }}
-        onZoneClick={zone => {
-          // console.log('zoneClick', zone)
-        }}
+        onInit={onInit}
+        onZoneMouseenter={onZoneMouseenter}
+        onZoneMousemove={onZoneMousemove}
+        onZoneMouseleave={onZoneMouseleave}
+        onZoneClick={onZoneClick}
       />
     </div>
   )

src/models/LiveDataSubscription.js

@@ -138,12 +138,18 @@ function getLatestDataFileState(fileName) {
 function useInertState(state) {
   const ref = useRef(state)
   const combine = (previous, current) => {
-    return {
-      ...previous,
-      ...current,
-      completed: current.completed || previous.completed,
-      data: current.data || previous.data,
+    if (
+      (!current.completed && previous.completed) ||
+      (!current.data && previous.data)
+    ) {
+      return {
+        ...previous,
+        ...current,
+        completed: current.completed || previous.completed,
+        data: current.data || previous.data,
+      }
     }
+    return current
   }
   const result = combine(ref.current, state)
   useEffect(() => {