diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index e17e10b8a95426..bfa880b3d58ce4 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -192,6 +192,25 @@ export default function useAutocomplete(props) { }); 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(''); const inputValue = isInputValueControlled ? inputValueProp : inputValueState;