Are you submitting a bug report or a feature request?
bug report
What is the current behavior?
When I update a first argument name of the hook useFieldArray, methods push and remove work incorrectly (suspect that others work the same way): they always reference to the value of argument name that was provided into useFieldArray at the first render. That's why elements aren't added and removed for an actual value of the name.
What is the expected behavior?
Elements should be added and removed from actual value of the argument name.
That's happening because mutators are returned by the useConstant hook only at the first render, and variable name is always taken from a closure of the first call.
const mutators = useConstant<Mutators>(() =>
// curry the field name onto all mutator calls
Object.keys(formMutators).reduce((result, key) => {
result[key] = (...args) => formMutators[key](name, ...args)
return result
}, {})
)
Are you submitting a bug report or a feature request?
bug report
What is the current behavior?
When I update a first argument
name
of the hookuseFieldArray
, methodspush
andremove
work incorrectly (suspect that others work the same way): they always reference to the value of argumentname
that was provided intouseFieldArray
at the first render. That's why elements aren't added and removed for an actual value of thename
.What is the expected behavior?
Elements should be added and removed from actual value of the argument
name
.Sandbox Link
https://codesandbox.io/s/react-final-form-arrays-report-qjlneq
Other information
That's happening because mutators are returned by the
useConstant
hook only at the first render, and variablename
is always taken from a closure of the first call.https://github.com/final-form/react-final-form-arrays/blob/303bdce913e5527ad8039554de8f15830d29922d/src/useFieldArray.js#L34
I could fix it with
useMemo
. What do you think of it?