From 729cd55562db4e2c1e436d2d732512f0c2ed423d Mon Sep 17 00:00:00 2001 From: cameronevans Date: Fri, 21 May 2021 22:39:41 -0300 Subject: [PATCH] fix(axes): restore memoization (#1521) Co-authored-by: Neil Kistner --- packages/axes/src/components/Axes.tsx | 95 +++++++++++----------- packages/axes/src/components/Axis.tsx | 8 +- packages/axes/src/components/AxisTick.tsx | 8 +- packages/axes/src/components/Grid.tsx | 88 ++++++++++---------- packages/axes/src/components/GridLine.tsx | 32 ++++---- packages/axes/src/components/GridLines.tsx | 6 +- packages/bullet/tests/Bullet.test.tsx | 5 +- packages/line/tests/Line.test.js | 2 +- 8 files changed, 129 insertions(+), 115 deletions(-) diff --git a/packages/axes/src/components/Axes.tsx b/packages/axes/src/components/Axes.tsx index 3e2881e3d..ebde1d0f3 100644 --- a/packages/axes/src/components/Axes.tsx +++ b/packages/axes/src/components/Axes.tsx @@ -1,54 +1,57 @@ -import React from 'react' +import React, { memo } from 'react' import { Axis } from './Axis' import { positions } from '../props' import { AnyScale, AxisProps, AxisValue } from '../types' -export const Axes = ({ - xScale, - yScale, - width, - height, - top, - right, - bottom, - left, -}: { - xScale: AnyScale - yScale: AnyScale - width: number - height: number - top?: AxisProps - right?: AxisProps - bottom?: AxisProps - left?: AxisProps -}) => { - const axes = { top, right, bottom, left } +export const Axes = memo( + ({ + xScale, + yScale, + width, + height, + top, + right, + bottom, + left, + }: { + xScale: AnyScale + yScale: AnyScale + width: number + height: number + top?: AxisProps + right?: AxisProps + bottom?: AxisProps + left?: AxisProps + }) => { + const axes = { top, right, bottom, left } - return ( - <> - {positions.map(position => { - const axis = axes[position] as typeof position extends 'bottom' | 'top' - ? AxisProps | undefined - : AxisProps | undefined + return ( + <> + {positions.map(position => { + const axis = axes[position] as typeof position extends 'bottom' | 'top' + ? AxisProps | undefined + : AxisProps | undefined - if (!axis) return null + if (!axis) return null - const isXAxis = position === 'top' || position === 'bottom' - const ticksPosition = position === 'top' || position === 'left' ? 'before' : 'after' + const isXAxis = position === 'top' || position === 'bottom' + const ticksPosition = + position === 'top' || position === 'left' ? 'before' : 'after' - return ( - - ) - })} - - ) -} + return ( + + ) + })} + + ) + } +) diff --git a/packages/axes/src/components/Axis.tsx b/packages/axes/src/components/Axis.tsx index d05c6c779..83dc3252a 100644 --- a/packages/axes/src/components/Axis.tsx +++ b/packages/axes/src/components/Axis.tsx @@ -1,11 +1,11 @@ -import React, { useMemo } from 'react' +import React, { useMemo, memo } from 'react' import { useSpring, useTransition, animated } from '@react-spring/web' import { useTheme, useMotionConfig } from '@nivo/core' import { computeCartesianTicks, getFormatter } from '../compute' import { AxisTick } from './AxisTick' import { AnyScale, AxisProps, AxisValue } from '../types' -export const Axis = ({ +const Axis = ({ axis, scale, x = 0, @@ -158,3 +158,7 @@ export const Axis = ({ ) } + +const memoizedAxis = memo(Axis) as typeof Axis + +export { memoizedAxis as Axis } diff --git a/packages/axes/src/components/AxisTick.tsx b/packages/axes/src/components/AxisTick.tsx index edb2f3a08..2929e12bb 100644 --- a/packages/axes/src/components/AxisTick.tsx +++ b/packages/axes/src/components/AxisTick.tsx @@ -1,9 +1,9 @@ -import React, { useMemo } from 'react' +import React, { useMemo, memo } from 'react' import { animated } from '@react-spring/web' import { useTheme } from '@nivo/core' import { AxisTickProps, AxisValue } from '../types' -export const AxisTick = ({ +const AxisTick = ({ value: _value, format, lineX, @@ -44,3 +44,7 @@ export const AxisTick = ({ ) } + +const memoizedAxisTick = memo(AxisTick) as typeof AxisTick + +export { memoizedAxisTick as AxisTick } diff --git a/packages/axes/src/components/Grid.tsx b/packages/axes/src/components/Grid.tsx index c7d0aa195..0c39a4293 100644 --- a/packages/axes/src/components/Grid.tsx +++ b/packages/axes/src/components/Grid.tsx @@ -1,51 +1,53 @@ -import React, { useMemo } from 'react' +import React, { useMemo, memo } from 'react' import { GridLines } from './GridLines' import { computeGridLines } from '../compute' import { AnyScale, AxisValue } from '../types' -export const Grid = ({ - width, - height, - xScale, - yScale, - xValues, - yValues, -}: { - width: number - height: number - xScale?: AnyScale - xValues?: number | X[] - yScale?: AnyScale - yValues?: number | Y[] -}) => { - const xLines = useMemo(() => { - if (!xScale) return false +export const Grid = memo( + ({ + width, + height, + xScale, + yScale, + xValues, + yValues, + }: { + width: number + height: number + xScale?: AnyScale + xValues?: number | X[] + yScale?: AnyScale + yValues?: number | Y[] + }) => { + const xLines = useMemo(() => { + if (!xScale) return false - return computeGridLines({ - width, - height, - scale: xScale, - axis: 'x', - values: xValues, - }) - }, [xScale, xValues, width, height]) + return computeGridLines({ + width, + height, + scale: xScale, + axis: 'x', + values: xValues, + }) + }, [xScale, xValues, width, height]) - const yLines = useMemo(() => { - if (!yScale) return false + const yLines = useMemo(() => { + if (!yScale) return false - return computeGridLines({ - width, - height, - scale: yScale, - axis: 'y', - values: yValues, - }) - }, [height, width, yScale, yValues]) + return computeGridLines({ + width, + height, + scale: yScale, + axis: 'y', + values: yValues, + }) + }, [height, width, yScale, yValues]) - return ( - <> - {xLines && } - {yLines && } - - ) -} + return ( + <> + {xLines && } + {yLines && } + + ) + } +) diff --git a/packages/axes/src/components/GridLine.tsx b/packages/axes/src/components/GridLine.tsx index 5ba01b6d7..2e2d0a5a2 100644 --- a/packages/axes/src/components/GridLine.tsx +++ b/packages/axes/src/components/GridLine.tsx @@ -1,19 +1,21 @@ -import React from 'react' +import React, { memo } from 'react' import { SpringValues, animated } from '@react-spring/web' import { useTheme } from '@nivo/core' -export const GridLine = ({ - animatedProps, -}: { - animatedProps: SpringValues<{ - opacity: number - x1: number - x2: number - y1: number - y2: number - }> -}) => { - const theme = useTheme() +export const GridLine = memo( + ({ + animatedProps, + }: { + animatedProps: SpringValues<{ + opacity: number + x1: number + x2: number + y1: number + y2: number + }> + }) => { + const theme = useTheme() - return -} + return + } +) diff --git a/packages/axes/src/components/GridLines.tsx b/packages/axes/src/components/GridLines.tsx index c3907a03a..51174f8d8 100644 --- a/packages/axes/src/components/GridLines.tsx +++ b/packages/axes/src/components/GridLines.tsx @@ -1,10 +1,10 @@ -import React from 'react' +import React, { memo } from 'react' import { useTransition } from '@react-spring/web' import { useMotionConfig } from '@nivo/core' import { GridLine } from './GridLine' import { Line } from '../types' -export const GridLines = ({ lines }: { lines: Line[] }) => { +export const GridLines = memo(({ lines }: { lines: Line[] }) => { const { animate, config: springConfig } = useMotionConfig() const transition = useTransition>( @@ -54,4 +54,4 @@ export const GridLines = ({ lines }: { lines: Line[] }) => { ))} ) -} +}) diff --git a/packages/bullet/tests/Bullet.test.tsx b/packages/bullet/tests/Bullet.test.tsx index fa5983639..e7ba4e00f 100644 --- a/packages/bullet/tests/Bullet.test.tsx +++ b/packages/bullet/tests/Bullet.test.tsx @@ -58,7 +58,7 @@ describe('Bullet', () => { it('should use horizontal layout by default', () => { const wrapper = mount() const items = wrapper.find('BulletItem') - const ticks = wrapper.find('Axis').first().find('AxisTick') + const ticks = wrapper.find('Memo(Axis)').first().find('Memo(AxisTick)') expect( ticks.map(el => el.prop('animatedProps').transform.get()).join('; ') @@ -83,8 +83,7 @@ describe('Bullet', () => { it('should support reverse layout', () => { const wrapper = mount() const items = wrapper.find('BulletItem') - const ticks = wrapper.find('Axis').first().find('AxisTick') - + const ticks = wrapper.find('Memo(Axis)').first().find('Memo(AxisTick)') expect( ticks.map(el => el.prop('animatedProps').transform.get()).join('; ') ).toMatchInlineSnapshot( diff --git a/packages/line/tests/Line.test.js b/packages/line/tests/Line.test.js index 0a610bbc8..cc7ebf14d 100644 --- a/packages/line/tests/Line.test.js +++ b/packages/line/tests/Line.test.js @@ -93,7 +93,7 @@ it('should have left and bottom axis by default', () => { ] const wrapper = mount() - const axes = wrapper.find('Axis') + const axes = wrapper.find('Memo(Axis)') expect(axes).toHaveLength(2) expect(axes.at(0).prop('axis')).toBe('x') expect(axes.at(1).prop('axis')).toBe('y')