react-final-form-arrays

react-final-form-arrays copied to clipboard

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.

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 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
    }, {})
  )

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?