diff --git a/src/components/measurements/index.js b/src/components/measurements/index.js index e10090066..8ff9444de 100644 --- a/src/components/measurements/index.js +++ b/src/components/measurements/index.js @@ -1,4 +1,4 @@ -import React, { useCallback, useRef, useEffect, useState } from "react"; +import React, { useCallback, useRef, useEffect, useMemo, useState } from "react"; import { useSelector } from "react-redux"; import { isEqual, orderBy } from "lodash"; import { NODE_VISIBLE } from "../../util/globals"; @@ -41,17 +41,6 @@ const useDeepCompareMemo = (value) => { return ref.current; }; -/** - * A wrapper around React's useCallback hook that does a deep comparison of the - * dependencies. - * @param {function} fn - * @param {Array} dependencies - * @returns - */ -const useDeepCompareCallback = (fn, dependencies) => { - return useCallback(fn, dependencies.map(useDeepCompareMemo)) -} - // Checks visibility against global NODE_VISIBLE const isVisible = (visibility) => visibility === NODE_VISIBLE; @@ -170,9 +159,11 @@ const MeasurementsPlot = ({height, width, showLegend, setPanelTitle}) => { } const groupedMeasurements = groupMeasurements(filteredMeasurements, groupBy, groupByValueOrder); - // Cache D3 scale functions to allow deep comparison to work below for svgData - const xScale = useDeepCompareCallback(createXScale(width, filteredMeasurements), [width, filteredMeasurements]); - const yScale = useCallback(createYScale(), []); + // Memoize D3 scale functions to allow deep comparison to work below for svgData + // Using `useMemo` instead of `useCallback` because `useCallback` is specifically designed for inline functions + // and will raise lint errors, see https://github.com/facebook/react/issues/19240#issuecomment-652945246 + const xScale = useMemo(() => createXScale(width, filteredMeasurements), [width, filteredMeasurements].map(useDeepCompareMemo)); + const yScale = useMemo(() => createYScale(), []); // Memoize all data needed for basic SVG to avoid extra re-drawings const svgData = useDeepCompareMemo({ containerHeight: height,