Reduce menu renderings

src/components/SiderMenu/BaseMenu.js

@@ -1,6 +1,8 @@
 import React, { PureComponent } from 'react';
 import { Menu, Icon } from 'antd';
 import Link from 'umi/link';
+import isEqual from 'lodash/isEqual';
+import memoizeOne from 'memoize-one';
 import { formatMessage } from 'umi/locale';
 import pathToRegexp from 'path-to-regexp';
 import { urlToList } from '../_utils/pathTools';
@@ -22,12 +24,15 @@ const getIcon = icon => {
   return icon;
 };
 
-export const getMenuMatches = (flatMenuKeys, path) =>
-  flatMenuKeys.filter(item => item && pathToRegexp(item).test(path));
+export const getMenuMatches = memoizeOne(
+  (flatMenuKeys, path) => flatMenuKeys.filter(item => item && pathToRegexp(item).test(path)),
+  isEqual
+);
 
 export default class BaseMenu extends PureComponent {
   constructor(props) {
     super(props);
+    this.getSelectedMenuKeys = memoizeOne(this.getSelectedMenuKeys, isEqual);
     this.flatMenuKeys = this.getFlatMenuKeys(props.menuData);
   }
 
@@ -66,12 +71,10 @@ export default class BaseMenu extends PureComponent {
   };
 
   // Get the currently selected menu
-  getSelectedMenuKeys = () => {
-    const {
-      location: { pathname },
-    } = this.props;
-    return urlToList(pathname).map(itemPath => getMenuMatches(this.flatMenuKeys, itemPath).pop());
-  };
+  getSelectedMenuKeys = pathname =>
+    urlToList(pathname).map(function(itemPath) {
+      return getMenuMatches(this.flatMenuKeys, itemPath).pop();
+    });
 
   /**
    * get SubMenu or Item
@@ -158,9 +161,14 @@ export default class BaseMenu extends PureComponent {
   };
 
   render() {
-    const { openKeys, theme, mode } = this.props;
+    const {
+      openKeys,
+      theme,
+      mode,
+      location: { pathname },
+    } = this.props;
     // if pathname can't match, use the nearest parent's key
-    let selectedKeys = this.getSelectedMenuKeys();
+    let selectedKeys = this.getSelectedMenuKeys(pathname);
     if (!selectedKeys.length && openKeys) {
       selectedKeys = [openKeys[openKeys.length - 1]];
     }

src/layouts/BasicLayout.js

@@ -46,6 +46,8 @@ function formatter(data, parentPath = '', parentAuthority, parentName) {
   });
 }
 
+const memoizeOneFormatter = memoizeOne(formatter, isEqual);
+
 const query = {
   'screen-xs': {
     maxWidth: 575,
@@ -136,7 +138,7 @@ class BasicLayout extends React.PureComponent {
     const {
       route: { routes },
     } = this.props;
-    return formatter(routes);
+    return memoizeOneFormatter(routes);
   }
 
   /**

src/pages/Dashboard/Monitor.js

@@ -121,7 +121,7 @@ class Monitor extends PureComponent {
             <Card
               title={
                 <FormattedMessage
-                  id="app.monitor.total-activity-forecast"
+                  id="app.monitor.activity-forecast"
                   defaultMessage="Activity forecast"
                 />
               }