From d9170572150330632747b2ce3ce6ca50e15a0444 Mon Sep 17 00:00:00 2001
From: plouc <benitteraphael@gmail.com>
Date: Wed, 23 Dec 2020 08:42:38 +0900
Subject: [PATCH] feat(circle-packing): memoize labels transition phases

---
 packages/circle-packing/src/Labels.tsx | 60 +++++++++++++-------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/packages/circle-packing/src/Labels.tsx b/packages/circle-packing/src/Labels.tsx
index 9db3fec76..08f18c572 100644
--- a/packages/circle-packing/src/Labels.tsx
+++ b/packages/circle-packing/src/Labels.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { useTransition } from 'react-spring'
 import { useMotionConfig } from '@nivo/core'
 import { CirclePackingCommonProps, ComputedDatum, LabelComponent, ComputedLabel } from './types'
@@ -14,6 +14,30 @@ interface CirclesProps<RawDatum> {
     component: LabelComponent<RawDatum>
 }
 
+const getTransitionPhases = <RawDatum,>() => ({
+    enter: (label: ComputedLabel<RawDatum>) => ({
+        x: label.node.x,
+        y: label.node.y,
+        radius: label.node.radius,
+        textColor: label.textColor,
+        opacity: 0,
+    }),
+    update: (label: ComputedLabel<RawDatum>) => ({
+        x: label.node.x,
+        y: label.node.y,
+        radius: label.node.radius,
+        textColor: label.textColor,
+        opacity: 1,
+    }),
+    leave: (label: ComputedLabel<RawDatum>) => ({
+        x: label.node.x,
+        y: label.node.y,
+        radius: label.node.radius,
+        textColor: label.textColor,
+        opacity: 0,
+    }),
+})
+
 export const Labels = <RawDatum,>({
     nodes,
     label,
@@ -32,29 +56,7 @@ export const Labels = <RawDatum,>({
         textColor,
     })
 
-    const enter = (label: ComputedLabel<RawDatum>) => ({
-        x: label.node.x,
-        y: label.node.y,
-        radius: label.node.radius,
-        textColor: label.textColor,
-        opacity: 0,
-    })
-
-    const update = (label: ComputedLabel<RawDatum>) => ({
-        x: label.node.x,
-        y: label.node.y,
-        radius: label.node.radius,
-        textColor: label.textColor,
-        opacity: 1,
-    })
-
-    const leave = (label: ComputedLabel<RawDatum>) => ({
-        x: label.node.x,
-        y: label.node.y,
-        radius: label.node.radius,
-        textColor: label.textColor,
-        opacity: 0,
-    })
+    const transitionPhases = useMemo(() => getTransitionPhases<RawDatum>(), [])
 
     const transition = useTransition<
         ComputedLabel<RawDatum>,
@@ -67,11 +69,11 @@ export const Labels = <RawDatum,>({
         }
     >(labels, {
         key: label => label.node.id,
-        initial: update,
-        from: enter,
-        enter: update,
-        update,
-        leave,
+        initial: transitionPhases.update,
+        from: transitionPhases.enter,
+        enter: transitionPhases.update,
+        update: transitionPhases.update,
+        leave: transitionPhases.leave,
         config: springConfig,
         immediate: !animate,
     })