rrf/setErrors being fired thousands of times on change() formAction

[im1dermike]

I have a RRF implementation where I have a table with a varied number of columns, but in the current example I'm testing with now, it has four columns, each with a RRF Control. On this page there is import functionality where you can import an unlimited number of rows. I'm currently testing 1000 records.

Here is my code that I'm firing to update the form with the new records:

dispatch(formActions.change("myForm.records", (records: UserRecord[]) => {
    return [...userRecords];
}));

When this fires, it ends up (after a few seconds delay) firing thousands of rrf/setErrors actions. This ends up taking a long time. The payload of the action is like this:

{
    errors: {numeric: false},
    merge: true,
    model: "myForm.records[999].columns[1].value",
    type: "rrf/setErrors"
}

The component contains this code:

<tbody>
	{users.map((record, i) => (
	  <tr key={i}>
		<td>
		  <FormControlGroup model={this.getRecordCodeModel(i)}>
			<div className="controls">
			  <Control.text
				autoComplete="off"
				className="input-block-level"
				model={this.getRecordCodeModel(i)}
				id={this.getRecordCodeModel(i)}
				errors={{ required }}
				persist
				disabled={!record.isNew}
			  />
			  <O3FormErrors model={this.getRecordCodeModel(i)} />
			</div>
		  </FormControlGroup>
		</td>
		{record.columns.map((column, j) => (
		  <td key={j}>
			<UserRecordColumnField
			  user={user}
			  formModel={formModel}
			  column={column}
			  recordIndex={i}
			  columnIndex={j}
			/>
		  </td>
		))}
		<td>{record.effectiveDate}</td>
		<td>{record.endDate}</td>
	  </tr>
	))}
</tbody>

I attempted to add { silent: true } to the change action, but it still dispatches all the rrf/setErrors.

Is there any way to deal with this so it does not take forever?

[davidkpiano]

Can you put this in a CodePen/CodeSandbox so I can play around with it and see the issue?

[im1dermike]

@davidkpiano Here you go.

Not sure if this was obvious, but, to be clear, the existence of the errors prop appears to be the difference in this situation occurring and not occurring.

In this example, I'm adding records by just mutating the react state. In my real code, I call:

let newRecords;
dispatch(actions.change(formModel, records => {
   return [...newRecords];
}));

The same rrf/setErrors situation occurs in both sets of code. The only difference is that, in my code, dispatching the change action provides an additional delay separate from the setErrors delay. 1000 records with 2 tracked controls takes an extra 10 seconds. In fact, calling change on a large tracked form data set is inherently super slow. Deleting a single record from a 1000 array data set using dispatch(formActions.remove(formModel, index)) takes ~4 seconds. I hope I'm not concluding that large RRF datasets result in awful performance...

[im1dermike]

Another example wired into form actions. This doesn't show the long delays I'm experiencing, but does show some delay.

[OscarYuen]

I am experiencing the same issue. Any progress on it~?