perf: useMemo for marks and steps

package.json

@@ -1,10 +1,7 @@
 {
-  "name": "rc-slider",
-  "version": "10.1.1",
+  "name": "rc-slider-perf",
+  "version": "10.1.5",
   "description": "Slider UI component for React",
-  "engines": {
-    "node": ">=8.x"
-  },
   "keywords": [
     "react",
     "react-component",
@@ -13,40 +10,36 @@
     "input",
     "range"
   ],
-  "homepage": "http://github.com/react-component/slider/",
+  "homepage": "http://github.com/madzgo/rc-slider-perf/",
+  "bugs": {
+    "url": "http://github.com/madzgo/rc-slider-perf/issues"
+  },
   "repository": {
     "type": "git",
-    "url": "git@github.com:react-component/slider.git"
-  },
-  "bugs": {
-    "url": "http://github.com/react-component/slider/issues"
+    "url": "git@github.com:madzgo/rc-slider-perf.git"
   },
+  "license": "MIT",
+  "main": "./lib/index",
+  "module": "./es/index",
+  "types": "./lib/index.d.ts",
+  "style": "./assets/index.css",
   "files": [
     "assets/*.css",
     "lib",
     "es",
     "dist"
   ],
-  "license": "MIT",
-  "main": "./lib/index",
-  "module": "./es/index",
-  "style": "./assets/index.css",
-  "types": "./lib/index.d.ts",
   "scripts": {
-    "start": "dumi dev",
+    "compile": "father build && lessc assets/index.less assets/index.css",
+    "coverage": "father test --coverage",
     "docs:build": "dumi build",
     "docs:deploy": "gh-pages -d .doc",
-    "compile": "father build && lessc assets/index.less assets/index.css",
-    "prepublishOnly": "npm run compile && np --yolo --no-publish",
     "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
+    "now-build": "npm run docs:build",
+    "prepublishOnly": "npm run compile && np --yolo --no-publish",
     "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
-    "test": "father test",
-    "coverage": "father test --coverage",
-    "now-build": "npm run docs:build"
-  },
-  "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "start": "dumi dev",
+    "test": "father test"
   },
   "dependencies": {
     "@babel/runtime": "^7.10.1",
@@ -79,5 +72,12 @@
     "react-dom": "^16.0.0",
     "regenerator-runtime": "^0.13.9",
     "typescript": "^4.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  },
+  "engines": {
+    "node": ">=8.x"
   }
 }

src/Marks/Mark.tsx

@@ -8,11 +8,10 @@ export interface MarkProps {
   children?: React.ReactNode;
   style?: React.CSSProperties;
   value: number;
-  onClick: (value: number) => void;
 }
 
 export default function Mark(props: MarkProps) {
-  const { prefixCls, style, children, value, onClick } = props;
+  const { prefixCls, style, children, value } = props;
   const { min, max, direction, includedStart, includedEnd, included } =
     React.useContext(SliderContext);
 
@@ -30,12 +29,6 @@ export default function Mark(props: MarkProps) {
         ...positionStyle,
         ...style,
       }}
-      onMouseDown={(e) => {
-        e.stopPropagation();
-      }}
-      onClick={() => {
-        onClick(value);
-      }}
     >
       {children}
     </span>

src/Marks/index.tsx

@@ -13,11 +13,10 @@ export interface InternalMarkObj extends MarkObj {
 export interface MarksProps {
   prefixCls: string;
   marks?: InternalMarkObj[];
-  onClick: (value: number) => void;
 }
 
 export default function Marks(props: MarksProps) {
-  const { prefixCls, marks, onClick } = props;
+  const { prefixCls, marks } = props;
 
   const markPrefixCls = `${prefixCls}-mark`;
 
@@ -29,13 +28,7 @@ export default function Marks(props: MarksProps) {
   return (
     <div className={markPrefixCls}>
       {marks.map(({ value, style, label }) => (
-        <Mark
-          key={value}
-          prefixCls={markPrefixCls}
-          style={style}
-          value={value}
-          onClick={onClick}
-        >
+        <Mark key={value} prefixCls={markPrefixCls} style={style} value={value}>
           {label}
         </Mark>
       ))}

src/Slider.tsx

@@ -476,6 +476,23 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
     ],
   );
 
+  // Performance improvements to not rerender marks and steps while dragging
+  const marksElements = React.useMemo<React.ReactNode>(() => {
+    return <Marks prefixCls={prefixCls} marks={markList} />;
+  }, [markList, prefixCls]);
+
+  const stepsElements = React.useMemo<React.ReactNode>(() => {
+    return (
+      <Steps
+        prefixCls={prefixCls}
+        marks={markList}
+        dots={dots}
+        style={dotStyle}
+        activeStyle={activeDotStyle}
+      />
+    );
+  }, [markList, prefixCls, dots, dotStyle, activeDotStyle]);
+
   // ============================ Render ============================
   return (
     <SliderContext.Provider value={context}>
@@ -500,13 +517,7 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
           onStartMove={mergedDraggableTrack ? onStartMove : null}
         />
 
-        <Steps
-          prefixCls={prefixCls}
-          marks={markList}
-          dots={dots}
-          style={dotStyle}
-          activeStyle={activeDotStyle}
-        />
+        {stepsElements}
 
         <Handles
           ref={handlesRef}
@@ -521,7 +532,7 @@ const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<SliderRef>)
           handleRender={handleRender}
         />
 
-        <Marks prefixCls={prefixCls} marks={markList} onClick={changeToCloseValue} />
+        {marksElements}
       </div>
     </SliderContext.Provider>
   );