final-form / final-form/react-final-form-hooks
Using initialValues with nested object causes infinite re-renders
- 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

Contributor 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