Update useEditableValue hook to sync external value changes

[bvaughn]

This PR changes the useEditableValue to more intelligently reset the local/editable state value when external value changes.

Previously, the hook initialized local state (in useState) to mirror the prop/state value. Updates to the value were ignored though. (Once the state was initialized, it was never updated.) The new hook updates the local/editable state to mirror the external value unless there are already pending, local edits being made.

Note that this particular change very closely resembles one of the derived state anti-patterns outlined in a previous blog post. I think it might still be an acceptable approach for this specific scenario though.

Here is a demo of the (broken) behavior before:

And here is the behavior after this change:

Edge case

Because of the way the new hook works, there is a potentially odd edge case, but I think it's acceptable given the way the "reset" button works:

Posting this PR for discussion purposes. Let's talk!

Resolves #16843

cc @hristo-kanchev

---

This was also broken for other use cases before. The example above was just one of the most awkward cases, but here is another:

Before

After

[sizebot]

No significant bundle size changes to report.

Generated by 🚫 dangerJS against 5ff6c1c

[gaearon]

Wanna add a case for when serialization fails?

[bvaughn]

Sure, good call.

[bvaughn]

psst, NaN will never equal NaN idiot