[3.0] Rerender issue with array field

[sahasprajapati]

Link to reproduction

No response

Describe the Bug

Issue with payload array fields. When using a relatively large array fields, the typing becomes erratic and unresponsive. This results in max depth limit reached and crashes the frontend.

Short video showcasing the issue:
https://vimeo.com/941145591?share=copy

To Reproduce

1. Create a collection with array
2. Set Array fields be relatively large (15-20) fields
3. Type on the name field (used as title), Typing is slow and not responsive
4. Crash occurs due to max depth limit reached.

const Roles = {
  slug: 'roles',
  admin: {

    useAsTitle: 'name',

    defaultColumns: ['name', 'permissions'],
  },

  fields: [
    { type: 'text', name: 'name', unique: true, required: true },
    {
      type: 'checkbox',
      name: 'isAdmin',
      defaultValue: false,
     
    },
    {
      type: 'array',
      name: 'permissions',
      admin: {},

    
      fields: [
        {
          type: 'row',
          fields: [
            {
              type: 'select',
              name: 'subject',
              options: collectionOptions,
              admin: {
                width: '30%',
              },
            },


          ],
        },

    
      ],
    },
  ],
}

export default Roles

Payload Version

3.0.0-beta.20

Adapters and Plugins

No response