final-form / final-form/react-final-form

`useField` returns an empty string on the first render for a newly added array item

Open
#1,093 2 comments 2 reactions 0 assignees View on GitHub
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.

Image

```
final-form: '5.0.1,
react-final-form: '7.0.1',
```
Not ok, the first render is empty.

Image

Maybe related:
https://github.com/final-form/react-final-form/issues/1050

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.