diff --git a/packages/material-ui/src/utils/useControlled.js b/packages/material-ui/src/utils/useControlled.js index dab0f90397ccd2..7b3c37f1cbb12c 100644 --- a/packages/material-ui/src/utils/useControlled.js +++ b/packages/material-ui/src/utils/useControlled.js @@ -27,7 +27,7 @@ export default function useControlled({ controlled, default: defaultProp, name, const { current: defaultValue } = React.useRef(defaultProp); React.useEffect(() => { - if (defaultValue !== defaultProp) { + if (!isControlled && defaultValue !== defaultProp) { console.error( [ `Material-UI: A component is changing the default ${state} state of an uncontrolled ${name} after being initialized. ` + diff --git a/packages/material-ui/src/utils/useControlled.test.js b/packages/material-ui/src/utils/useControlled.test.js index 67ba138274d45d..31155debec145c 100644 --- a/packages/material-ui/src/utils/useControlled.test.js +++ b/packages/material-ui/src/utils/useControlled.test.js @@ -83,4 +83,15 @@ describe('useControlled', () => { 'Material-UI: A component is changing the default value state of an uncontrolled TestComponent after being initialized.', ); }); + + it('should not raise a warning if changing the defaultValue when controlled', () => { + const { setProps } = render( + + {() => null} + , + ); + expect(consoleErrorMock.callCount()).to.equal(0); + setProps({ defaultValue: 1 }); + expect(consoleErrorMock.callCount()).to.equal(0); + }); });