Performance issue when having more text fields

[Toan Quoc Ho]

Got performance issue when the form having 15 fields.

I've tried to experiment a simple form with 15 TextField. And I've faced with a performance issue, the UI is quite laggy and the text change is not reflect as I type in.

Currently, the TextField from formik-material-ui is wrapping the MUITextField from material-ui. And this cause the re-render on MUITextField of every fields in the form whenever we change the value of 1 field. My current solution is that I use memoized MUITextField and everything working just fine.

Suggestions:

• Update to use memoized component of MUI components

Example:
Current TextField

export function TextField({ children, ...props }: TextFieldProps) { 
    return <MuiTextField {...fieldToTextField(props)}>{children}</MuiTextField;
}

could be like this:

const MemoizedMuiTextField = React.memo(MuiTextField);
export function TextField({ children, ...props }: TextFieldProps) { 
    return <MemoizedMuiTextField {...fieldToTextField(props)}>{children}</MemoizedMuiTextField>;
}

[Ciaran Liedeman]

Hi @hqtoan94

I dont think the library should decide that for all users. It might make performance worse in some cases.
Have you tried FastField?