[Autocomplete] Replace controlled/uncontrolled logic with useControlled

mui · Jan 6, 2020 · 7dc69a0 · 7dc69a0
1 parent 93803ce
commit 7dc69a0
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 26 deletions.
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -293,7 +293,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
     setAnchorEl,
     inputValue,
     groupedOptions,
-  } = useAutocomplete(props);
+  } = useAutocomplete({ ...props, componentName: 'Autocomplete' });
 
   let startAdornment;
 

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-constant-condition */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { setRef, useEventCallback } from '@material-ui/core/utils';
+import { setRef, useEventCallback, useControlled } from '@material-ui/core/utils';
 
 // https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript
 // Give up on IE 11 support for this feature
@@ -108,6 +108,7 @@ export default function useAutocomplete(props) {
     open: openProp,
     options = [],
     value: valueProp,
+    componentName = 'useAutocomplete',
   } = props;
 
   const [defaultId, setDefaultId] = React.useState();
@@ -186,30 +187,11 @@ export default function useAutocomplete(props) {
     }
   }
 
-  const { current: isControlled } = React.useRef(valueProp !== undefined);
-  const [valueState, setValue] = React.useState(() => {
-    return !isControlled ? defaultValue || (multiple ? [] : null) : null;
+  const { value, setValue: setValueState, isControlled } = useControlled({
+    controlled: valueProp,
+    default: defaultValue || (multiple ? [] : null),
+    name: componentName,
   });
-  const value = isControlled ? valueProp : valueState;
-
-  if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React.useEffect(() => {
-      if (isControlled !== (valueProp !== undefined)) {
-        console.error(
-          [
-            `Material-UI: A component is changing ${
-              isControlled ? 'a ' : 'an un'
-            }controlled useAutocomplete to be ${isControlled ? 'un' : ''}controlled.`,
-            'Elements should not switch from uncontrolled to controlled (or vice versa).',
-            'Decide between using a controlled or uncontrolled useAutocomplete ' +
-              'element for the lifetime of the component.',
-            'More info: https://fb.me/react-controlled-components',
-          ].join('\n'),
-        );
-      }
-    }, [valueProp, isControlled]);
-  }
 
   const { current: isInputValueControlled } = React.useRef(inputValueProp != null);
   const [inputValueState, setInputValue] = React.useState('');
@@ -445,7 +427,7 @@ export default function useAutocomplete(props) {
       onChange(event, newValue);
     }
     if (!isControlled) {
-      setValue(newValue);
+      setValueState(newValue);
     }
   };