I am currently passing a state personsInfo which contains a list of Persons into a child component PersonEditFormTwo. The state personsInfo is updated everytime the TextField value is changed in the child component. This is currently causing some performance issues – when typing into the TextField the input is rendered with delay.

personsInfo is passed down to the child components to allow for all child components to check for duplicates everytime the values are modified.

Is there a better way to design this to resolve this performance issue?

// Parent Component

// Function to update the personsInfo state, passed down to PersonEditFormTwo
  const updatePersonInfo = (newInfo) => {
    setPersonsInfo(newInfo);
  };

return (
<form onSubmit={submitForm}>
              <Stack spacing={3}>
                {Array.isArray(personsInfo) &&
                  personsInfo
                  .filter((p) => personIdsState.includes(p.personId))
                  .map((p, i) => {
                    return (
                      <PersonEditFormTwo
                        personId={p.personId}
                        personsInfo={personsInfo}
                        credTypes={credTypes}
                        accessGroups={accessGroups}
                        updatePersonInfo={updatePersonInfo}
                        onClear={clearPerson(p.personId)}
                        onValidationChange={(isValid) => handleValidationChange(p.personId, isValid)}
                      />
                    );
                  })}
                <div>
                  <Button>
                    Submit
                  </Button>
                </div>
              </Stack>
            </form>
    );

// Child Component (PersonEditFormTwo)
const handleFormChange = (fieldName, value) => {
    const newPersons = personsInfo.map((p) =>
      p.personId === personId ? { ...p, [fieldName]: value } : p
    );
    updatePersonInfo(newPersons);
  };

return (
<TextField
              fullWidth
              label="First Name"
              name="personFirstName"
              onChange={(event) => HandleFormChange(FieldNames.FIRST_NAME, event.target.value)}
              defaultValue={person.personFirstName}
              required
              error={!isValid[FieldNames.FIRST_NAME].isValid}
              helperText={isValid[FieldNames.FIRST_NAME].errorMessage}
            />
    );