final-form / final-form/react-final-form
Value lags one render cycle when using dynamic name
- Dominant language
- JavaScript
- Stars
- 7.4k
- Forks
- 497
- PR merge metrics
- No merged PRs in 30d
Description
### Are you submitting a **bug report** or a **feature request**?
Bug Report
### What is the current behavior?
I have a form with a section that renders a different part of the form state depending on another control, and I'm attempting to control what it renders by changing the `name` prop on the `Field` element. But I'm finding that inside the child function, the `input.name` changes when the `name` prop changes, the `input.value` remains the same for a single render cycle, and then changes in a subsequent, immediate re-render. I've created a simplified example here:
### What is the expected behavior?
I expected that the component would re-render with the `value` for the new `name`.
### Sandbox Link
https://codesandbox.io/s/82zlxvv4x0?expanddevtools=1. Change the stooge, and notice the console log.
### What's your environment?
```
├─ final-form@4.10.0
└─ react-final-form@3.6.5
```
Contributor guide
Research direction
Reproduce the lag in the linked CodeSandbox using the listed react-final-form and final-form versions, then trace how the Field child function receives input.name and input.value when the dynamic name changes. Done means the value for the new name is available without an extra render cycle and the sandbox behavior is corrected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100