@material-ui/utils: useControlled() have a different behavior than native primitives

[layershifter]

Hey folks!

Thanks for your contribution into OSS, I am often gathering ideas in your code ❤️

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

I was testing different implementations of hooks that are implementing autocontrolled behavior for custom components. There is one inconsistency that I found in useControlled() between native primitives.

Current Behavior 😯

Uncontrolled component cannot become controlled 🟥

Expected Behavior 🤔

Uncontrolled component can become controlled ✅

Steps to Reproduce 🕹

I am not using an official template as CodeSandbox have been prepared before.

https://codesandbox.io/s/react-use-controlled-7sen6

Steps:

1. Open a CodeSandbox
2. Scroll down to "A Sandbox for input"
3. Press "set to undefined" button (makes a component uncontrolled), press "remount" button (will change key and remount a component, it will be uncontrolled now), press "set to Foo Bar" (will make a component controlled again)
4. Notice that an input has "Foo Baz" value ✅
5. Try to perform the same steps for "A Sandbox for CustomInputMaterial", notice that an input's value is empty 🔴

Context 🔦

It's not affecting me in any way, but I think that it will be nice to align with the behavior of native primitives.

https://github.com/mui-org/material-ui/blob/b96916d373096570b96db101e0ceca25f7ca9346/packages/material-ui-utils/src/useControlled.js#L6

This line is responsive for the current behavior: computed once value will never change. If you have reasons to keep current behavior, please post them 😺

Your Environment 🌎

@material-ui/utils@5.0.0-alpha.27

[oliviertassinari]

@layershifter This was done on purpose, to simplify the problem.

[oliviertassinari]

To expand a bit more on the problem. I have seen this topic pop up a number of times in the past, under different forms. Two (not directly related) I can easily find:

• In TextField defaultValue prop not being set on re-render #1328, we cover how TextField doesn't handle updates of the default value
• In input DX improvement opportunity facebook/react#12710, why react doesn't warn when the default value changes even if controlled.

There are many more in the repository under the "support" or "question" label.

Historically, we have implemented it, ignoring the behavior of a native input, to simplify the problem. Controlled is defined at mount time, end of the story. This was done before we abstracted the logic under a useControlled hook, early on.

Now, It seems technically possible to match the behavior of a native input since we have the useControlled abstraction. However, I don't see any value in doing such. A single source of truth is easier to manage (for developers using the API), so I think that we might as well put constraints in place to encourage it, a pit of success.