Problem

On complex pages (e.g. a datagrid with 100+ rows and several buttons per row), each render takes several seconds. When profiling with Chrome and React profiler, it appears that a significant share of that rendering time is spent on the button ripple effect.

The ripple effect is mostly useful on Mobile, where there is no "click" feeling. But react-admin is mostly designed for desktop use

Solution

Disable the ripple effect by default by using mui themes. The users can still re-enable it if they want.

Don't forget to replace the focus style by something else, as explained in the Mui Button documentation:

Proof of concept

In https://codesandbox.io/s/hopeful-cdn-0op29?file=/src/index.js, the PostList displays 100 rows

With debug tools turned on, a rerender of the list takes 4.5s on average (measured across 6 runs).

I disabled the ripple by passing a custom theme, as explained in https://material-ui.com/customization/globals/#default-props:

const theme = createMuiTheme({
  props: {
    // Name of the component ⚛️
    MuiButtonBase: {
      // The default props to change
      disableRipple: true, // No more ripple, on the whole application 💣!
    },
  },
});

With debug tools turned on, a rerender of the list takes 3,2s on average (measured across 6 runs).

That's a net performance boost of (4.5 - 3,2) / 4.5 = 29%. Yep, you read that right.

Disabling TouchRipple on Buttons makes complex pages 29% faster

Edit: The initial benchmark had a mistake, so the measure boost is 29%, not 38%.