Fix warnings introduced by latest React canary

package.json

@@ -227,7 +227,12 @@
     "**/@types/react": "^18.0.26",
     "**/@types/react-is": "^17.0.3",
     "**/cross-fetch": "^3.1.5",
-    "**/react-is": "^18.2.0"
+    "**/react-is": "^18.2.0",
+    "react": "18.3.0-next-39a3b72c6-20230414",
+    "scheduler": "0.24.0-next-39a3b72c6-20230414",
+    "react-is": "18.3.0-next-39a3b72c6-20230414",
+    "react-test-renderer": "18.3.0-next-39a3b72c6-20230414",
+    "react-dom": "18.3.0-next-39a3b72c6-20230414"
   },
   "nyc": {
     "include": [

packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx

@@ -309,8 +309,12 @@ describe('<TextareaAutosize />', () => {
           forceUpdate();
         }).toErrorDev([
           'MUI: Too many re-renders.',
-          !strictModeDoubleLoggingSuppressed && 'MUI: Too many re-renders.',
-          !strictModeDoubleLoggingSuppressed && 'MUI: Too many re-renders.',
+          !strictModeDoubleLoggingSuppressed &&
+            !React.version.startsWith('18.3') &&
+            'MUI: Too many re-renders.',
+          !strictModeDoubleLoggingSuppressed &&
+            !React.version.startsWith('18.3') &&
+            'MUI: Too many re-renders.',
         ]);
       });
     });

packages/mui-base/src/useAutocomplete/useAutocomplete.test.js

@@ -31,7 +31,12 @@ describe('useAutocomplete', () => {
           {groupedOptions.length > 0 ? (
             <ul {...getListboxProps()}>
               {groupedOptions.map((option, index) => {
-                return <li {...getOptionProps({ option, index })}>{option}</li>;
+                const { key, ...listItemProps } = getOptionProps({ option, index });
+                return (
+                  <li key={key} {...listItemProps}>
+                    {option}
+                  </li>
+                );
               })}
             </ul>
           ) : null}
@@ -257,7 +262,12 @@ describe('useAutocomplete', () => {
           {groupedOptions.length > 0 ? (
             <ul {...getListboxProps()}>
               {groupedOptions.map((option, index) => {
-                return <li {...getOptionProps({ option, index })}>{option}</li>;
+                const { key, ...listItemProps } = getOptionProps({ option, index });
+                return (
+                  <li key={key} {...listItemProps}>
+                    {option}
+                  </li>
+                );
               })}
             </ul>
           ) : null}

packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx

@@ -485,11 +485,14 @@ describe('Joy <Autocomplete />', () => {
           renderTags={(value, getTagProps) =>
             value
               .filter((x, index) => index === 1)
-              .map((option, index) => (
-                <Chip key={index} endDecorator={<ChipDelete {...getTagProps({ index })} />}>
-                  {option.title}
-                </Chip>
-              ))
+              .map((option, index) => {
+                const { key: tagKey, ...tagProps } = getTagProps({ index });
+                return (
+                  <Chip key={index} endDecorator={<ChipDelete key={tagKey} {...tagProps} />}>
+                    {option.title}
+                  </Chip>
+                );
+              })
           }
           onChange={handleChange}
           autoFocus

packages/mui-joy/src/Autocomplete/Autocomplete.tsx

@@ -423,13 +423,14 @@ const Autocomplete = React.forwardRef(function Autocomplete(
       selectedOptions = renderTags(value as Array<unknown>, getCustomizedTagProps, ownerState);
     } else {
       selectedOptions = (value as Array<unknown>).map((option, index) => {
+        const { key, ...endDecoratorProps } = getCustomizedTagProps({ index });
         return (
           <Chip
             key={index}
             size={size}
             variant="soft"
             color={color === 'context' ? undefined : 'neutral'}
-            endDecorator={<ChipDelete {...getCustomizedTagProps({ index })} />}
+            endDecorator={<ChipDelete key={key} {...endDecoratorProps} />}
           >
             {getOptionLabel(option)}
           </Chip>
@@ -643,8 +644,10 @@ const Autocomplete = React.forwardRef(function Autocomplete(
     },
   });
 
-  const defaultRenderOption = (optionProps: any, option: unknown) => (
-    <SlotOption {...optionProps}>{getOptionLabel(option)}</SlotOption>
+  const defaultRenderOption = ({ key, ...optionProps }: any, option: unknown) => (
+    <SlotOption key={key} {...optionProps}>
+      {getOptionLabel(option)}
+    </SlotOption>
   );
 
   const renderOption = renderOptionProp || defaultRenderOption;

packages/mui-material-next/src/Tabs/Tabs.test.js

@@ -338,11 +338,21 @@ describe('<Tabs />', () => {
 
           nodeEnv = process.env.NODE_ENV;
           // We can't use a regular assignment, because it causes a syntax error in Karma
-          Object.defineProperty(process.env, 'NODE_ENV', { value: 'development' });
+          Object.defineProperty(process.env, 'NODE_ENV', {
+            configurable: true,
+            writable: true,
+            enumerable: true,
+            value: 'development',
+          });
         });
 
         after(() => {
-          Object.defineProperty(process.env, 'NODE_ENV', { value: nodeEnv });
+          Object.defineProperty(process.env, 'NODE_ENV', {
+            configurable: true,
+            writable: true,
+            enumerable: true,
+            value: nodeEnv,
+          });
         });
 
         it('should warn if a Tab has display: none', () => {

packages/mui-material/src/Autocomplete/Autocomplete.js

@@ -502,14 +502,12 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
     if (renderTags) {
       startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
     } else {
-      startAdornment = value.map((option, index) => (
-        <Chip
-          label={getOptionLabel(option)}
-          size={size}
-          {...getCustomizedTagProps({ index })}
-          {...ChipProps}
-        />
-      ));
+      startAdornment = value.map((option, index) => {
+        const { key, ...tagProps } = getCustomizedTagProps({ index });
+        return (
+          <Chip label={getOptionLabel(option)} size={size} key={key} {...tagProps} {...ChipProps} />
+        );
+      });
     }
   }
 
@@ -541,7 +539,14 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
   );
 
   const renderGroup = renderGroupProp || defaultRenderGroup;
-  const defaultRenderOption = (props2, option) => <li {...props2}>{getOptionLabel(option)}</li>;
+  const defaultRenderOption = (props2, option) => {
+    const { key, ...listItemProps } = props2;
+    return (
+      <li key={key} {...listItemProps}>
+        {getOptionLabel(option)}
+      </li>
+    );
+  };
   const renderOption = renderOptionProp || defaultRenderOption;
 
   const renderListOption = (option, index) => {

packages/mui-material/src/Autocomplete/Autocomplete.test.js

@@ -617,7 +617,10 @@ describe('<Autocomplete />', () => {
           renderTags={(value, getTagProps) =>
             value
               .filter((x, index) => index === 1)
-              .map((option, index) => <Chip label={option.title} {...getTagProps({ index })} />)
+              .map((option, index) => {
+                const { key, ...tagProps } = getTagProps({ index });
+                return <Chip key={key} label={option.title} {...tagProps} />;
+              })
           }
           onChange={handleChange}
           renderInput={(params) => <TextField {...params} autoFocus />}

packages/mui-material/src/Tabs/Tabs.test.js

@@ -375,11 +375,21 @@ describe('<Tabs />', () => {
 
           nodeEnv = process.env.NODE_ENV;
           // We can't use a regular assignment, because it causes a syntax error in Karma
-          Object.defineProperty(process.env, 'NODE_ENV', { value: 'development' });
+          Object.defineProperty(process.env, 'NODE_ENV', {
+            configurable: true,
+            writable: true,
+            enumerable: true,
+            value: 'development',
+          });
         });
 
         after(() => {
-          Object.defineProperty(process.env, 'NODE_ENV', { value: nodeEnv });
+          Object.defineProperty(process.env, 'NODE_ENV', {
+            configurable: true,
+            writable: true,
+            enumerable: true,
+            value: nodeEnv,
+          });
         });
 
         it('should warn if a `Tab` has display: none', function test() {

packages/mui-material/src/useMediaQuery/useMediaQuery.test.js

@@ -197,7 +197,10 @@ describe('useMediaQuery', () => {
           );
         }
 
-        const { hydrate } = renderToString(<Test />);
+        const { hydrate } = renderToString(<Test />, {
+          // https://github.com/facebook/react/issues/26095
+          strict: false,
+        });
         hydrate();
         expect(screen.getByTestId('matches').textContent).to.equal('false');
         expect(getRenderCountRef.current()).to.equal(2);

packages/mui-styles/src/withStyles/withStyles.test.js

@@ -135,7 +135,15 @@ describe('withStyles', () => {
       const jssCallbackStub = stub().returns({});
       const styles = { root: jssCallbackStub };
       const StyledComponent = withStyles(styles)(MyComp);
-      render(<StyledComponent mySuppliedProp={222} />);
+      expect(() => {
+        render(<StyledComponent mySuppliedProp={222} />);
+      }).toErrorDev(
+        React.version.startsWith('18.3')
+          ? [
+              'Warning: MyComp: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.',
+            ]
+          : [],
+      );
 
       expect(jssCallbackStub.callCount).to.equal(1);
       expect(jssCallbackStub.args[0][0]).to.deep.equal({
@@ -179,20 +187,29 @@ describe('withStyles', () => {
       const styles = { root: { display: 'flex' } };
       const StyledComponent = withStyles(styles, { name: 'MuiFoo' })(MuiFoo);
 
-      const { container } = render(
-        <ThemeProvider
-          theme={createTheme({
-            components: {
-              MuiFoo: {
-                defaultProps: {
-                  foo: 'bar',
+      let container;
+      expect(() => {
+        container = render(
+          <ThemeProvider
+            theme={createTheme({
+              components: {
+                MuiFoo: {
+                  defaultProps: {
+                    foo: 'bar',
+                  },
                 },
               },
-            },
-          })}
-        >
-          <StyledComponent foo={undefined} />
-        </ThemeProvider>,
+            })}
+          >
+            <StyledComponent foo={undefined} />
+          </ThemeProvider>,
+        ).container;
+      }).toErrorDev(
+        React.version.startsWith('18.3')
+          ? [
+              'Warning: MuiFoo: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.',
+            ]
+          : [],
       );
 
       expect(container).to.have.text('bar');

packages/mui-utils/src/useControlled.js

@@ -25,10 +25,27 @@ export default function useControlled({ controlled, default: defaultProp, name,
       }
     }, [state, name, controlled]);
 
-    const { current: defaultValue } = React.useRef(defaultProp);
+    const appearedRef = React.useRef(false);
+    const initialDefaultPropRef = React.useRef();
 
     React.useEffect(() => {
-      if (!isControlled && defaultValue !== defaultProp) {
+      // first appearence will contain ref value of the first render but defaultProp will be from the second render
+      // thus always failing for values that change identities e.g. `[]` or `{}`
+      if (!appearedRef.current) {
+        initialDefaultPropRef.current = defaultProp;
+      }
+    }, []);
+
+    React.useEffect(() => {
+      appearedRef.current = true;
+
+      return () => {
+        appearedRef.current = false;
+      };
+    }, []);
+
+    React.useEffect(() => {
+      if (!isControlled && initialDefaultPropRef.current !== defaultProp) {
         console.error(
           [
             `MUI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` +

test/utils/initMatchers.test.js

@@ -97,25 +97,6 @@ describe('custom matchers', () => {
       expect(() => {}).not.toErrorDev([]);
     });
 
-    it('fails if no arguments are used as a way of negating', () => {
-      expect(() => {
-        expect(() => {}).toErrorDev();
-      }).to.throw(
-        "Expected to call console.error but didn't provide messages. " +
-          "If you don't expect any messages prefer `expect().not.toErrorDev();",
-      );
-    });
-
-    it('fails if arguments are passed when negated', () => {
-      expect(() => {
-        expect(() => {}).not.toErrorDev('not unexpected?');
-      }).to.throw(
-        'Expected no call to console.error but provided messages. ' +
-          "If you want to make sure a certain message isn't logged prefer the positive. " +
-          'By expecting certain messages you automatically expect that no other messages are logged',
-      );
-    });
-
     it('ignores `false` messages', () => {
       const isReact16 = false;
       expect(() => {

test/utils/initMatchers.ts

@@ -519,18 +519,6 @@ chai.use((chaiAPI, utils) => {
         // TODO Remove type once MUI X enables noImplicitAny
         let caughtError: unknown | null = null;
 
-        this.assert(
-          expectedMessages.length > 0,
-          `Expected to call console.${methodName} but didn't provide messages. ` +
-            `If you don't expect any messages prefer \`expect().not.${matcherName}();\`.`,
-          `Expected no call to console.${methodName} while also expecting messages.` +
-            'Expected no call to console.error but provided messages. ' +
-            "If you want to make sure a certain message isn't logged prefer the positive. " +
-            'By expecting certain messages you automatically expect that no other messages are logged',
-          // Not interested in a diff but the typings require the 4th parameter.
-          undefined,
-        );
-
         // Ignore skipped messages in e.g. `[condition && 'foo']`
         const remainingMessages = expectedMessages.filter((messageOrFalse) => {
           return messageOrFalse !== false;