Use visibility sensor

package.json

@@ -1,6 +1,6 @@
 {
   "name": "covid-visualizer",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "dependencies": {
     "@types/react": "16.4.16",
     "@visx/xychart": "v2.0.0-alpha.0",
@@ -25,6 +25,7 @@
     "react-svg-pan-zoom": "^3.10.0",
     "react-tooltip": "^4.2.21",
     "react-use-gesture": "^9.1.3",
+    "react-visibility-sensor": "^5.1.1",
     "reactour": "^1.18.6",
     "styled-components": "^5.3.0",
     "topojson-client": "^3.1.0",

src/components/Map/Counties/Counties.jsx

@@ -1,53 +1,63 @@
-import React, { memo, forwardRef } from 'react';
+import React, { memo, forwardRef, useRef } from 'react';
+import VisibilitySensor from 'react-visibility-sensor';
 
-export const Counties = memo(forwardRef(({ mapLayer, counties }, ref) => {
-  const fillColor = (county, mapLayer) => {
-    let fill;
-
-    switch (mapLayer) {
-      case 'cfr':
-        fill = county.fill && county.fill.cfr;
-        break;
-      case 'cdc':
-        fill = county.fill && county.fill.cdc;
-        break;
-      case 'risk':
-        fill = county.fill && county.fill.riskLevels.overall;
-        break;
-      case 'deaths':
-        fill = county.fill && county.fill.deaths;
-        break;
-      case 'vaccinated':
-        fill = county.fill && county.fill.vaccinated;
-        break;
-      case 'cases':
-        fill = county.fill && county.fill.cases;
-        break;
-      case 'caseDensity':
-        fill = county.fill && county.fill.caseDensity;
-        break;
-      case 'infectionRate':
-        fill = county.fill && county.fill.infectionRate;
-        break;
-      case 'testPositivityRatio':
-        fill = county.fill && county.fill.testPositivityRatio;
-        break;
-    }
+const fillColor = (county, mapLayer) => {
+  let fill;
 
-    return fill ? fill : 'rgba(255, 255, 255, 0)';
+  switch (mapLayer) {
+    case 'cfr':
+      fill = county.fill && county.fill.cfr;
+      break;
+    case 'cdc':
+      fill = county.fill && county.fill.cdc;
+      break;
+    case 'risk':
+      fill = county.fill && county.fill.riskLevels.overall;
+      break;
+    case 'deaths':
+      fill = county.fill && county.fill.deaths;
+      break;
+    case 'vaccinated':
+      fill = county.fill && county.fill.vaccinated;
+      break;
+    case 'cases':
+      fill = county.fill && county.fill.cases;
+      break;
+    case 'caseDensity':
+      fill = county.fill && county.fill.caseDensity;
+      break;
+    case 'infectionRate':
+      fill = county.fill && county.fill.infectionRate;
+      break;
+    case 'testPositivityRatio':
+      fill = county.fill && county.fill.testPositivityRatio;
+      break;
   }
 
-   return counties ? <g key="county-shapes">{counties.map(county =>
-     <path
-       id={county.fips}
-       state-fips={county.state.fips}
-       className={`county-shape`}
-       key={`${county.fips}`}
-       fill={fillColor(county, mapLayer)}
-       fillOpacity=".8"
-       strokeWidth=".25"
-       pointerEvents="none"
-       zIndex="1"
-       d={county.path}
-     />)}</g> : null;
+  return fill ? fill : 'rgba(255, 255, 255, 0)';
+}
+
+const County = memo(({ county, mapLayer }) => {
+  return (
+    <VisibilitySensor partialVisibility={true}>
+      {({isVisible}) =>
+        <path
+          id={county.fips}
+          state-fips={county.state.fips}
+          className={`county-shape`}
+          fill={fillColor(county, mapLayer)}
+          style={{ visibility: isVisible ? 'visible' : 'hidden' }}
+          fillOpacity=".8"
+          strokeWidth=".25"
+          pointerEvents="none"
+          zIndex="1"
+          d={county.path}
+        />
+      }
+    </VisibilitySensor>
+  )
+})
+
+export const Counties = memo(forwardRef(({ mapLayer, counties }, ref) => {
+   return counties ? <g key="county-shapes">{counties.map(county => <County key={`${county.fips}`} county={county} mapLayer={mapLayer} />)}</g> : null;
 }))