Open jamesmfriedman opened 5 years ago
@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.
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 '...';
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