material-components
Checkbox Performance
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
@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.
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.
Do you use Checkbox with ripple or without? Removing ripple effect makes it much faster
@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
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 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.
How to use checkbox without ripple:
import { Checkbox } from '...'; instead of import Checkbox from '...';