Redux-form does not update initialValues prop of wrapped form

redux-form does not update initialValues prop of wrapped form when receiving new initialProps - even when enableReinitialize is true.

The current shouldComponentUpdate behavior (line 247 in reduxForm.js, of version 6.5.0) consults the array propsToNotUpdateFor (which contains the string ‘initialValues’) and returns false, with the result that the wrapped component never receives the new initialValues prop altogether.

This results in the initialValues prop of the wrapped component to become stale and different than the initialValues prop of the reduxForm component, as well as from the initial values stored in the redux store. This looks to me undesirable, and in contradiction with the documentation (and I believe also the intended semantics) of this prop.

[marcusmarchesoni]

Hi @d-leeg,

Not sure if the issue is the same, but I struggled some time to render the form with initialValues, went through a few issues here and now I managed to do it.

Apart from “enableReinitialize” and “initialValues”, I had to remove a “null check” from the start of my render method. I was avoiding to render the component until “initialValues” was populated, but I was not receiving new props and it was not being rendered for the second time. After I removed this condition, left the component and form to render “empty” for first time and the values get automatic populated after that.

Hope it helps!

reduxForm({ form: ‘myForm’, enableReinitialize: true})

function mapStateToProps(state) { return { initialValues: state.something }; }

[DesignByOnyx]

I found a solution which should fix this. Looking at the source code - you can see that they check for any configured immutableProps for strict equality, and this code hasn’t changed in 3 years.

This means you can do the following to achieve the desired result:

reduxForm({
  ...
  enableReinitialize: true,
  immutableProps: ['initialValues']
})(YourForm)

NOTE: this requires that you use immutable initialValues:

const MyComponent = () => {
   // DO NOT DO THIS
   return <MyForm initialValues={{ foo: 'bar' }} />
}

Instead, you can do something like this:

const MyComponent = () => {
   // DO THIS
   const initialValues = useMemo(() => ({ foo: 'bar' }), [])
   return <MyForm initialValues={initialValues} />
}