refactor(easy-peasy): return single values from useStoreState

src/hooks/useD3Zoom.ts

@@ -1,5 +1,5 @@
 import { useEffect, MutableRefObject } from 'react';
-import * as d3Zoom from 'd3-zoom';
+import { zoom, zoomIdentity } from 'd3-zoom';
 import { select, event } from 'd3-selection';
 
 import { useStoreState, useStoreActions } from '../store/hooks';
@@ -10,17 +10,14 @@ interface UseD3ZoomParams {
   onMove?: () => void;
 }
 
-const d3ZoomInstance = d3Zoom
-  .zoom()
+const d3ZoomInstance = zoom()
   .scaleExtent([0.5, 2])
   .filter(() => !event.button);
 
 export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): void => {
-  const state = useStoreState((s) => ({
-    transform: s.transform,
-    d3Selection: s.d3Selection,
-    d3Zoom: s.d3Zoom,
-  }));
+  const transform = useStoreState((s) => s.transform);
+  const d3Selection = useStoreState((s) => s.d3Selection);
+  const d3Zoom = useStoreState((s) => s.d3Zoom);
 
   const initD3 = useStoreActions((actions) => actions.initD3);
   const updateTransform = useStoreActions((actions) => actions.updateTransform);
@@ -48,13 +45,10 @@ export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): voi
         }
       });
 
-      if (state.d3Selection && state.d3Zoom) {
+      if (d3Selection && d3Zoom) {
         // we need to restore the graph transform otherwise d3 zoom transform and graph transform are not synced
-        const graphTransform = d3Zoom.zoomIdentity
-          .translate(state.transform[0], state.transform[1])
-          .scale(state.transform[2]);
-
-        state.d3Selection.call(state.d3Zoom.transform, graphTransform);
+        const graphTransform = zoomIdentity.translate(transform[0], transform[1]).scale(transform[2]);
+        d3Selection.call(d3Zoom.transform, graphTransform);
       }
     }