Controller returns old fields value when updating it's name dynamically

[ggat]

When changing Controller name dynamically, the Controller triggers its input re-render where field.name reflects updated name but field.values is of the old field. If the parent component re-renders once again then field.name and field.values are in sync again. Apparently it take 1 render cycle for the value to refresh.

I got an example proof on CodeSandbox

• Click on "Swap name", in the console you'll see the output "value for banana apple" (wrong)
• Click on "Trigger Render", now the output is "value for banana banana" (right)

Thoughts? Do you think this might be a bug or expected behavior?

[Moshyfawn]

See this FAQ for an explanation.

  <Controller
+   key={currentName}
    control={methods.control}
    name={currentName}
    render={({ field: { value, name } }) => {
      console.log(`value for ${name}`, value);
    }}
  />

[ggat]

Thanks @Moshyfawn, that was my original solution too, but I was not entirely sure, now I'm confident.

[kpotter-m2]

1 year later and this is still the fix, thank you!

[Mario-Eis]

Is there any downside in generally passing the field name as a key for every field in the whole application?