[utils] Allow passing NaN as defaultValue to useControlled

mui · Mar 19, 2024 · 94adbb8 · 94adbb8
1 parent 9585d28
commit 94adbb8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/packages/mui-utils/src/useControlled/useControlled.js b/packages/mui-utils/src/useControlled/useControlled.js
@@ -29,7 +29,14 @@ export default function useControlled({ controlled, default: defaultProp, name,
     const { current: defaultValue } = React.useRef(defaultProp);
 
     React.useEffect(() => {
-      if (!isControlled && defaultValue !== defaultProp) {
+      // eslint-disable-next-line no-restricted-globals
+      const numberIsNaN = (x) => typeof x === 'number' && isNaN(x);
+
+      if (
+        !isControlled &&
+        // IE11 support. Either replace `===` with `Object.is`, or use `Number.isNaN`.
+        !(defaultValue === defaultProp || (numberIsNaN(defaultValue) && numberIsNaN(defaultProp)))
+      ) {
         console.error(
           [
             `MUI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` +

diff --git a/packages/mui-utils/src/useControlled/useControlled.test.js b/packages/mui-utils/src/useControlled/useControlled.test.js
@@ -105,4 +105,10 @@ describe('useControlled', () => {
       setProps({ defaultValue: 1 });
     }).not.toErrorDev();
   });
+
+  it('should not raise a warning if setting NaN as the defaultValue when uncontrolled', () => {
+    expect(() => {
+      render(<TestComponent defaultValue={NaN}>{() => null}</TestComponent>);
+    }).not.toErrorDev();
+  });
 });