[ButtonBase] Better performance

packages/material-ui/src/ButtonBase/ButtonBase.test.js

@@ -4,6 +4,7 @@ import keycode from 'keycode';
 import { assert } from 'chai';
 import PropTypes from 'prop-types';
 import { spy, useFakeTimers } from 'sinon';
+import rerender from 'test/utils/rerender';
 import { createShallow, createMount, getClasses, unwrap } from '../test-utils';
 import TouchRipple from './TouchRipple';
 import ButtonBase from './ButtonBase';
@@ -658,4 +659,22 @@ describe('<ButtonBase />', () => {
       assert.strictEqual(wrapper.find('.focusVisible').length, 1);
     });
   });
+
+  describe('rerender', () => {
+    beforeEach(() => {
+      rerender.spy();
+    });
+
+    afterEach(() => {
+      rerender.reset();
+    });
+
+    it('should not rerender the TouchRipple', () => {
+      const wrapper = mount(<ButtonBase>foo</ButtonBase>);
+      wrapper.setProps({
+        children: 'bar',
+      });
+      assert.strictEqual(rerender.updates.length, 1);
+    });
+  });
 });

packages/material-ui/src/ButtonBase/TouchRipple.js

@@ -87,7 +87,7 @@ export const styles = theme => ({
   },
 });
 
-class TouchRipple extends React.Component {
+class TouchRipple extends React.PureComponent {
   state = {
     nextKey: 0,
     ripples: [],

test/utils/rerender.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import getDisplayName from 'recompose/getDisplayName';
+
+function createComponentDidUpdate(instance) {
+  return function componentDidUpdate() {
+    const displayName = getDisplayName(this);
+    instance.updates.push({
+      displayName,
+    });
+  };
+}
+
+// Inspired by https://github.com/maicki/why-did-you-update
+class Rerender {
+  updates = [];
+
+  spy = () => {
+    this.savedCDU = React.Component.prototype.componentDidUpdate;
+    React.Component.prototype.componentDidUpdate = createComponentDidUpdate(this);
+  };
+
+  savedCDU = null;
+
+  reset = () => {
+    this.updates = [];
+    React.Component.prototype.componentDidUpdate = this.savedCDU;
+  };
+}
+
+export default new Rerender();