[Checkbox][Switch] Remove checked argument from onChange (#25871)

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -486,7 +486,24 @@ As the core components use emotion as a styled engine, the props used by emotion
   +<Button />
   ```
 
-- [ButtonBase] Remove the deprecated `buttonRef` prop. The `ref` prop should be used in place.
+### ButtonBase
+
+- Remove the deprecated `buttonRef` prop. The `ref` prop should be used in place.
+
+### Checkbox
+
+- Remove the second argument from `onChange`. You can pull out the checked state by accessing `event.target.checked`.
+
+  ```diff
+  function MyCheckbox() {
+  - const handleChange = (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
+  + const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  +   const checked = event.target.checked;
+    };
+
+    return <Checkbox onChange={handleChange} />;
+  }
+  ```
 
 ### Chip
 
@@ -1153,6 +1170,21 @@ As the core components use emotion as a styled engine, the props used by emotion
   </SvgIcon>
   ```
 
+### Switch
+
+- Remove the second argument from `onChange`. You can pull out the checked state by accessing `event.target.checked`.
+
+  ```diff
+  function MySwitch() {
+  - const handleChange = (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
+  + const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  +   const checked = event.target.checked;
+    };
+
+    return <Switch onChange={handleChange} />;
+  }
+  ```
+
 ### Table
 
 - The customization of the table pagination's actions labels must be done with the `getItemAriaLabel` prop. This increases consistency with the `Pagination` component.

packages/material-ui/src/internal/SwitchBase.d.ts

@@ -52,7 +52,7 @@ export interface SwitchBaseProps
    * You can pull out the new value by accessing `event.target.value` (string).
    * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   readOnly?: boolean;
   /**
    * If `true`, the `input` element is required.

packages/material-ui/src/internal/SwitchBase.js

@@ -100,13 +100,10 @@ const SwitchBase = React.forwardRef(function SwitchBase(props, ref) {
       return;
     }
 
-    const newChecked = event.target.checked;
-
-    setCheckedState(newChecked);
+    setCheckedState(event.target.checked);
 
     if (onChange) {
-      // TODO v5: remove the second argument.
-      onChange(event, newChecked);
+      onChange(event);
     }
   };
 

packages/material-ui/src/internal/SwitchBase.test.js

@@ -194,22 +194,29 @@ describe('<SwitchBase />', () => {
     });
 
     it('should call onChange when controlled', () => {
-      const checked = true;
-      const handleChange = spy();
-      const { getByRole } = render(
-        <SwitchBase
-          icon="unchecked"
-          checkedIcon="checked"
-          type="checkbox"
-          checked={checked}
-          onChange={handleChange}
-        />,
-      );
+      const defaultChecked = true;
+      function ControlledSwichBase() {
+        const [checked, setChecked] = React.useState(defaultChecked);
 
-      getByRole('checkbox').click();
+        return (
+          <SwitchBase
+            icon="unchecked"
+            checkedIcon="checked"
+            type="checkbox"
+            checked={checked}
+            onChange={(event) => setChecked(event.target.checked)}
+          />
+        );
+      }
 
-      expect(handleChange.callCount).to.equal(1);
-      expect(handleChange.firstCall.args[1]).to.equal(!checked);
+      const { getByRole } = render(<ControlledSwichBase />);
+      const checkbox = getByRole('checkbox');
+
+      act(() => {
+        checkbox.click();
+      });
+
+      expect(checkbox).to.have.property('checked', !defaultChecked);
     });
 
     it('should not change checkbox state when event is default prevented', () => {