React slow with multiple controlled text inputs

Question

I have a form with multiple text inputs. I have them all set up as controlled inputs. When typing, there is a lag of up to several seconds for the new text to display in the fie

Answer 1

Here is a fix I found. It sets the parent state in onBlur. Please vet this

import React, { useState } from 'react';
import MUIField from '@material-ui/core/TextField';
import _ from 'lodash';

export default (props) => {
  const [value, setValue] = useState(props.defaultValue);
  const prop = _.omit(props, ['onChange', 'value', 'defaultValue']);

  return (
       { setValue(e.target.value); }}
                onBlur={() => {
                  props.onChange({ target:{ value }});
              }}/>);
};