From f9c8038e215cdf785f90b52111445ff05ec5df53 Mon Sep 17 00:00:00 2001 From: Jover Lee Date: Wed, 28 Aug 2024 11:07:37 -0700 Subject: [PATCH] measurements: Revert back to useMemo Resolves lint warnings from https://github.com/nextstrain/auspice/issues/1837. I wonder if I ran into lint warnings the first time I tried `useCallback` which is why I ended up using `useMemo`? Noting in comments so I don't flip-flop again. --- src/components/measurements/index.js | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/src/components/measurements/index.js b/src/components/measurements/index.js index e10090066..39f5256b5 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,18 @@ 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 + * + * Silencing warnings for useMemo's dependency list since we need to do a deep comparison of `filteredMeasurements` array + * -Jover, 28 August 2024 + */ + // eslint-disable-next-line react-hooks/exhaustive-deps + 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,