fix: avoid unnecessary re-renders in basic cases

Refs: #439
zakodium-oss · Nov 1, 2022 · 34892fb · 34892fb
1 parent 6b9db11
commit 34892fb
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 12 deletions.
diff --git a/src/components/Axis/LinearAxis.tsx b/src/components/Axis/LinearAxis.tsx
@@ -1,5 +1,5 @@
 import { ScaleLinear } from 'd3-scale';
-import { useRef } from 'react';
+import { memo, useRef } from 'react';
 import { useLinearPrimaryTicks } from 'react-d3-utils';
 
 import HorizontalAxis from './HorizontalAxis';
@@ -10,7 +10,7 @@ interface LinearAxisProps extends AxisChildProps<number> {
   scale: ScaleLinear<number, number>;
 }
 
-export default function LinearAxis(props: LinearAxisProps) {
+function LinearAxis(props: LinearAxisProps) {
   const { position, tickLabelFormat, scale, ...otherProps } = props;
 
   const axisRef = useRef<SVGGElement>(null);
@@ -35,3 +35,5 @@ export default function LinearAxis(props: LinearAxisProps) {
     />
   );
 }
+
+export default memo(LinearAxis);
diff --git a/src/components/Axis/LogAxis.tsx b/src/components/Axis/LogAxis.tsx
@@ -1,5 +1,5 @@
 import { ScaleLogarithmic } from 'd3-scale';
-import { useRef } from 'react';
+import { memo, useRef } from 'react';
 import { useLogTicks } from 'react-d3-utils';
 
 import HorizontalAxis from './HorizontalAxis';
@@ -10,7 +10,7 @@ interface LogAxisProps extends AxisChildProps<number> {
   scale: ScaleLogarithmic<number, number>;
 }
 
-export default function LogAxis(props: LogAxisProps) {
+function LogAxis(props: LogAxisProps) {
   const { position, tickLabelFormat, scale, ...otherProps } = props;
 
   const axisRef = useRef<SVGGElement>(null);
@@ -34,3 +34,5 @@ export default function LogAxis(props: LogAxisProps) {
     />
   );
 }
+
+export default memo(LogAxis);
diff --git a/src/components/Axis/TimeAxis.tsx b/src/components/Axis/TimeAxis.tsx
@@ -1,5 +1,5 @@
 import { ScaleTime } from 'd3-scale';
-import { useRef } from 'react';
+import { memo, useRef } from 'react';
 import { useTimeTicks } from 'react-d3-utils';
 
 import HorizontalAxis from './HorizontalAxis';
@@ -10,7 +10,7 @@ interface TimeAxisProps extends AxisChildProps<Date> {
   scale: ScaleTime<number, number>;
 }
 
-export default function TimeAxis(props: TimeAxisProps) {
+function TimeAxis(props: TimeAxisProps) {
   const { position, tickLabelFormat, scale, ...otherProps } = props;
 
   const axisRef = useRef<SVGGElement>(null);
@@ -35,3 +35,5 @@ export default function TimeAxis(props: TimeAxisProps) {
     />
   );
 }
+
+export default memo(TimeAxis);
diff --git a/src/components/Series/LineSeries.tsx b/src/components/Series/LineSeries.tsx
@@ -1,5 +1,5 @@
 import { line } from 'd3-shape';
-import { CSSProperties, useEffect, useMemo } from 'react';
+import { CSSProperties, memo, useEffect, useMemo } from 'react';
 
 import { useLegend } from '../../contexts/legendContext';
 import { usePlotContext } from '../../contexts/plotContext';
@@ -19,7 +19,7 @@ export interface LineSeriesProps<T extends SeriesPoint = SeriesPoint>
   lineStyle?: CSSFuncProps<{ id: string }>;
 }
 
-export function LineSeries<T extends SeriesPoint = SeriesPoint>(
+function LineSeriesInner<T extends SeriesPoint = SeriesPoint>(
   props: LineSeriesProps<T>,
 ) {
   const [, legendDispatch] = useLegend();
@@ -104,6 +104,8 @@ export function LineSeries<T extends SeriesPoint = SeriesPoint>(
   );
 }
 
+export const LineSeries = memo(LineSeriesInner);
+
 interface LineSeriesRenderProps {
   id: string;
   data: ReadonlyArray<SeriesPoint>;

diff --git a/src/components/Series/RangeSeries.tsx b/src/components/Series/RangeSeries.tsx
@@ -1,6 +1,6 @@
 import { extent } from 'd3-array';
 import { area } from 'd3-shape';
-import { CSSProperties, useEffect, useMemo } from 'react';
+import { CSSProperties, memo, useEffect, useMemo } from 'react';
 
 import { useLegend } from '../../contexts/legendContext';
 import {
@@ -23,7 +23,7 @@ export interface RangeSeriesProps<T extends RangeSeriesPoint>
   lineStyle?: CSSProperties;
 }
 
-export function RangeSeries<T extends RangeSeriesPoint>(
+function RangeSeriesInner<T extends RangeSeriesPoint>(
   props: RangeSeriesProps<T>,
 ) {
   const id = useId(props.id, 'series');
@@ -103,6 +103,8 @@ export function RangeSeries<T extends RangeSeriesPoint>(
   return isVisible ? <RangeSeriesRender {...lineProps} /> : null;
 }
 
+export const RangeSeries = memo(RangeSeriesInner);
+
 interface RangeSeriesRenderProps {
   data: ReadonlyArray<RangeSeriesPoint>;
   xAxis: string;

diff --git a/src/contexts/legendContext.tsx b/src/contexts/legendContext.tsx
@@ -5,6 +5,7 @@ import {
   ReactNode,
   Reducer,
   useContext,
+  useMemo,
   useReducer,
 } from 'react';
 
@@ -37,7 +38,7 @@ type LegendActions =
   | ActionType<'TOGGLE_VISIBILITY', { id: string }>;
 
 type LegendDispatch = Dispatch<LegendActions>;
-type LegendContext = [LegendState, LegendDispatch];
+type LegendContext = readonly [LegendState, LegendDispatch];
 
 const context = createContext<LegendContext | null>(null);
 
@@ -93,6 +94,13 @@ const initialLegendState: LegendState = {
 };
 
 export const LegendProvider = (props: { children: ReactNode }) => {
-  const ctx = useReducer(legendReducer, initialLegendState);
+  const [legendState, legendDispatch] = useReducer(
+    legendReducer,
+    initialLegendState,
+  );
+  const ctx = useMemo(
+    () => [legendState, legendDispatch] as const,
+    [legendState, legendDispatch],
+  );
   return <context.Provider value={ctx}>{props.children}</context.Provider>;
 };