I understand that React allows you to use the key prop on a Component to simulate a controlled Component: https://kentcdodds.com/blog/understanding-reacts-key-prop

What I am wondering, however, is if there is a way to simulate this without the constant loss of focus on an <input> tag with using the defaultValue property and NOT the value or onChange event AND have the defaultValue property be dynamic? - I understand the loss of focus is triggered because of the re-rendering with the key change.

Example:

<input key={someKey} defaultValue={someDefaultValue} onBlur={onBlurHandler} />

The above example won't allow for dynamic updating of the defaultValue property in the event that someDefaultValue changes, from what I understand, because the key and the defaultValue properties are not the same.

However, this will work for a dynamic update of the defaultValue property:

<input key={someKey} defaultValue={someKey} onBlur={onBlurHandler} />

The problem with this, however, is the constant loss of focus if this value is dynamic.

I understand that defaultValue is an initial load property but the controlled input with keys is a way to circumvent that.

What I am asking is - is there a way to have that defaultValue property update after the initial load and NOT cause a loss of focus for the provided input component?

Thank you for your time.