FieldArray remove and push immediately cause view not rerender

I have a method that remove a field from FieldArray and immediately add a field into FieldArray but the view is not rerender. The state in redux is already updated to the new field when I look at the redux logger log.

  fields.remove(0);
  fields.push({ postId: 1 });

When I press on one of the input in the FieldArray, the FieldArray will only rerender.

After I read through the source code of ConnectedFieldArray.js, I found that the shouldComponentUpdate method is preventing the FieldArray to rerender

const propsToNotUpdateFor = [
  '_reduxForm',
  'value'
]

    shouldComponentUpdate(nextProps) {
      const nextPropsKeys = Object.keys(nextProps)
      const thisPropsKeys = Object.keys(this.props)
      return nextPropsKeys.length !== thisPropsKeys.length || nextPropsKeys.some(prop => {
        // useful to debug rerenders
        // if (!plain.deepEqual(this.props[ prop ], nextProps[ prop ])) {
        //   console.info(prop, 'changed', this.props[ prop ], '==>', nextProps[ prop ])
        // }
        return !~propsToNotUpdateFor.indexOf(prop) && !deepEqual(this.props[ prop ], nextProps[ prop ])
      })
    }

the value of the FieldArray’s Field has changed, but it is returning false due to this part" !~propsToNotUpdateFor.indexOf(prop)"

[stjepan]

…and so your code breaks now…

https://github.com/erikras/redux-form/issues/2740

[dtipson]

Hah, but that just made me realize (I do have the values if I want, but that’s not what I want) I do have access to fields.length, and since it’s removing that’s causing the problem, I can just use that as the key: key={${i}_${fields.length}}

That solves the issue, at least for adding/removing. It probably requires re-rendering every item (because the keys change) but that’s acceptable in my case, and maybe the best I can do without a uuid system built into the data.