Checkbox Performance

[jamesmfriedman]

There was a weird issue I came across where patching native getters and setters was causing problems with React events firing. https://github.com/material-components/material-components-web/issues/4018

In exploring the differences in implementations, I came across some stats I think would be valuable to you. Short version, mat-react Checkbox re-renders itself constantly. This will definitely be a performance bottleneck on form heavy sites. I personally have a couple of apps that have a matrix of checkboxes, and this would crush the browser.

Checkbox Component mount mat-react: 8 render cycles rmwc: 2 render cycles

Checkbox Change mat-react: 17 render cycles rmwc: 2 render cycles

[moog16]

@jamesmfriedman thanks for reporting this...I read up on #4018 and is a concern. I'll add some notes there, and keep this issue open for investigating on the React side.

[jamesmfriedman]

it has to do with the gratuitous use of setState. A few things you could try.

• Pure component. I usually stay away from these because they require the caller to know what they're doing and maintain object identity
• Debounce setState. React has some setState pooling built in though so this isn't ideal.
• Don't maintain the checkbox state inside the component. Right now you have 3 sources of truth, the props, the internal state, and the checkboxes state
• before you call setState, check to see if the value has even changed. Right now you updated the checked state every time the component updates, causing a double render.

[gugu]

Do you use Checkbox with ripple or without? Removing ripple effect makes it much faster

[vargajacint]

@moog16 The Checkbox component performance is really bad. I'm using a lot of checkbox, and i have a lot of performance issue, please fix, or just use PureComponent

[moog16]

Yup we haven't had time to get to this issue - I also have experienced this with the checkbox and have a few ideas on how to change it. Would you like to take the lead on this one?

[gugu]

You can use checkbox without ripple. Much faster

On Mon, Jul 1, 2019, at 9:03 PM, Matt Goo wrote:

Yup we haven't had time to get to this issue - I also have experienced this with the checkbox and have a few ideas on how to change it. Would you like to take the lead on this one?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/material-components/material-components-web-react/issues/392?email_source=notifications&email_token=AAASLIK3ZBYHT3Z7BNN7BR3P5JBHFA5CNFSM4GAQ7J7KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODY64XPI#issuecomment-507366333, or mute the thread https://github.com/notifications/unsubscribe-auth/AAASLINZQANP3P5LW2LPKWDP5JBHFANCNFSM4GAQ7J7A.

[gugu]

How to use checkbox without ripple: import { Checkbox } from '...'; instead of import Checkbox from '...';