memoize getValueCache calls

kevinsqi · Oct 31, 2018 · 6cedd7e · 6cedd7e
1 parent 4a9028f
commit 6cedd7e
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/.babelrc b/.babelrc
@@ -6,6 +6,9 @@
     ],
     "@babel/react"
   ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ],
   "env": {
     "test": {
       "presets": [

diff --git a/.eslintrc b/.eslintrc
@@ -1,4 +1,5 @@
 {
+  "parser": "babel-eslint",
   "extends": [
     "plugin:react/recommended",
     "airbnb",

diff --git a/package.json b/package.json
@@ -39,12 +39,14 @@
     "react": "^0.14.0 || ^15.0.0 || ^16.0.0"
   },
   "dependencies": {
+    "memoize-one": "^4.0.2",
     "prop-types": "^15.6.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.1.2",
     "@babel/core": "^7.1.2",
     "@babel/plugin-external-helpers": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
     "autoprefixer": "^9.1.3",

diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import memoizeOne from 'memoize-one';
 import { DAYS_IN_WEEK, MILLISECONDS_IN_ONE_DAY, DAY_LABELS, MONTH_LABELS } from './constants';
 import {
   dateNDaysAgo,
@@ -94,8 +95,8 @@ class CalendarHeatmap extends React.Component {
     );
   }
 
-  getValueCache(values) {
-    return values.reduce((memo, value) => {
+  getValueCache = memoizeOne((props) =>
+    props.values.reduce((memo, value) => {
       const date = convertToDate(value.date);
       const index = Math.floor((date - this.getStartDateWithEmptyDays()) / MILLISECONDS_IN_ONE_DAY);
       // eslint-disable-next-line no-param-reassign
@@ -106,8 +107,8 @@ class CalendarHeatmap extends React.Component {
         tooltipDataAttrs: this.getTooltipDataAttrsForValue(value),
       };
       return memo;
-    }, {});
-  }
+    }, {}),
+  );
 
   getValueForIndex(index) {
     if (this.valueCache[index]) {
@@ -308,7 +309,7 @@ class CalendarHeatmap extends React.Component {
   }
 
   render() {
-    this.valueCache = this.getValueCache(this.props.values);
+    this.valueCache = this.getValueCache(this.props);
 
     return (
       <svg className="react-calendar-heatmap" viewBox={this.getViewBox()}>