Checkbox performance slows significantly at scale

[katieweinstein]

Describe the bug The Checkbox component significantly slows performance & rendering time at scale (2000+ checkboxes) and slows functionality, like checking or unchecking a box. A difference of 4.69 native vs 10.02 React Magma was observed.

To Reproduce Steps to reproduce the behavior:

1. Add the following code to the Checkbox storybook component:

   export const Lots = args => {
   function getCheckboxes() {
   const boxes = [];
   for (let i = 0; i < args.numberRows; i++) {
     boxes.push(
       <Checkbox key={i} checked labelText="Checked checkbox" />
     );
   }
   return boxes;
   }
   return <>{getCheckboxes()}</>;
   };
   Lots.args = {
   numberRows: 2000,
   };

2. Open Storybook and Chrome devtools Performance tab.
3. Record the rendering time.
4. Change the Checkbox component to <input type="checkbox" />
5. Rerecord the rendering time, note the difference.

Expected behavior Checkbox should not slow rendering this dramatically at scale.

Screenshots React Magma Checkbox

Native checkbox input

Desktop (please complete the following information):

• OS: iOS
• Browser: Chrome
• Version: 110.0.5481.100

Smartphone (please complete the following information): N/A

[silvalaura]

We should investigate virtualization for our checkboxes

[silvalaura]

After React 18 upgrade