final-form / final-form/react-final-form
`useField` returns an empty string on the first render for a newly added array item
- Dominant language
- JavaScript
- Stars
- 7.4k
- Forks
- 497
- PR merge metrics
- No merged PRs in 30d
Description
### Description
After upgrading to newer versions of react-final-form/final-form, `useField()` returns an empty string on the first render for a newly added item inside an array value.
The form values already contain the correct object, but the field hook initially returns "" for the new nested field path. On the next render, it returns the correct value.
This is a regression compared to older versions, where `useField('list.*')` returned the actual value from form state immediately on the first render.
### Steps to reproduce
https://codesandbox.io/p/sandbox/awesome-jepsen-dh35dp
- click add
- a new item is added to the array, item is mounted for list.0
- check the console output from useField("list.0")
- see first empty string, then actual value
```
final-form: '4.20.10,
react-final-form: '6.5.9',
```
Everything ok, the first render returns the value.
```
final-form: '5.0.1,
react-final-form: '7.0.1',
```
Not ok, the first render is empty.
Maybe related:
https://github.com/final-form/react-final-form/issues/1050
Contributor guide
Research direction
Start by reproducing the behavior in the linked CodeSandbox, then trace the useField("list.0") entry point for a newly added array item. Compare versions 4.20.10/6.5.9 with 5.0.1/7.0.1 and the related issue #1050; done means the first render returns the value already present in form state rather than an empty string.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100