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

Using initialValues with nested object causes infinite re-renders

Open
#51 4 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
469
Forks
19
PR merge metrics
No merged PRs in 30d

Description

### Are you submitting a **bug report** or a **feature request**?
Bug

### What is the current behavior?
Using a nested JSON object in initialValues causes infinite re-renders.
Also, form fields can't be changed.

Steps-
1. Open the code sandbox link
2. Try to change the first name and last name fields
3. Open console to see the infinite re-render console log messages

Example -
```
const Test = () => {
const { form, handleSubmit, values, pristine, submitting } = useForm({
onSubmit,
validate,
initialValues: {
name: {
firstName: 'Clark',
lastName: 'Kent',
}
}
});
```

### What is the expected behavior?
Form should render once with initial values.
And we should be able to update form field values.

### Sandbox Link
https://codesandbox.io/s/cold-https-6v26o

### What's your environment?
node: v10.2.1
react-final-form-hooks: "2.0.0",
Mac OS Mojave 10.14.2

### Other information

Screenshot
![Screen Shot 2019-06-27 at 5 35 16 pm](https://user-images.githubusercontent.com/24689953/60246402-f8d16400-9901-11e9-83e6-2157bf65e152.png)

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox reproduction and trace the useForm initialValues path for the nested name object. Confirm the repeated renders and inability to edit firstName or lastName, then verify that the form initializes once and both fields can be updated without further render looping.

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
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.