[Checkbox] Slows down the render of the page

[ghost]

Steps to reproduce 🕹

I have a long list of people (1000)
Each of them has a checkbox status attach to every user
I did notice when I use HTML checkbox instead of MUI one, the page renders about 3 to 5 times faster

The issue only occurs when I'm dealing with a long list of players, it does not affect a short list of players,
at least from the visible standpoint

Repository with live reproduction:
https://github.com/alexander-vashchuk/react-slow-render

Current behavior 😯

Checkbox takes a while to update the page

Expected behavior 🤔

Checkbox works immediately

Context 🔦

Demo:

I would like any help on this one, I might be doing something stupid from the React optimization standpoint, so I'd appreciate any advice

Your environment 🌎

  System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\.yarn\bin\yarn.CMD
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
    browser: Google Chrome
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (110.0.1587.41)
  npmPackages:
    @emotion/react: ^11.10.5 => 11.10.5
    @emotion/styled: ^11.10.5 => 11.10.5
    @mui/base:  5.0.0-alpha.108
    @mui/core-downloads-tracker:  5.10.16
    @mui/material: ^5.10.16 => 5.10.16
    @mui/private-theming:  5.10.16
    @mui/styled-engine:  5.10.16
    @mui/system:  5.10.16
    @mui/types:  7.2.2
    @mui/utils:  5.10.16
    @types/react: 18.0.25 => 18.0.25
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 4.9.3 => 4.9.3

[michaldudak]

Material UI adds functionality on top of the native checkbox, so it's understandable it'll work slower.
In your case, I'd recommend paging the table or implementing virtualization. Displaying a thousand rows at once rarely makes a good user experience.

[colin969]

I understand that MUI comes with overhead, but the difference between a MUI checkbox and a basic checkbox is like comparing a scooter to a bullet train.

[oliviertassinari]

I would be curious to see Pigment CSS's impact here but the reproduction is not available anymore. https://github.com/alexander-vashchuk/react-slow-render is a 404.

In any case, it looks like a case where the rerendering of the React tree should be pruned. Meaning, that updating one checkbox should likely not trigger the rerender of 1,000 rows.

[rafaelpmaio]

For me it works as expected without any function associated to the onChange prop, but as soon as I set any function to it I get the described delay.

And if I use the same function on a basic checkbox it works just fine.