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

Value lags one render cycle when using dynamic name

Open
#338 0 comments 0 reactions 0 assignees View on GitHub
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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.