title: MaterialUI TextField lag issue. How to improve performance when the form has many inputs?
body: <p>I encountered an annoying problem with Textfield using MateriaUI framework. I have a form with many inputs and it seems to be a bit laggy when typing or deleting values inside the fields. In other components when there are like 2 or 3 inputs there's no lag at all.</p>
  <p>EDIT: The problem seems to be with my onChange handler.</p>
  <p>Any help is much appreciated. Thanks in advance.</p>
  <p>This is my custom input code:</p>
  <pre><code>import React, { useReducer, useEffect } from 'react';
  import { validate } from '../utils/validators';
  import TextField from '@material-ui/core/TextField';
  import { ThemeProvider, makeStyles, createMuiTheme } from '@material-ui/core/styles';
  import { green } from '@material-ui/core/colors';
  
  const useStyles = makeStyles((theme) =&gt; ({
      root: {
          color: 'white'
      },
      input: {
          margin: '10px',
          '&amp;&amp; .MuiInput-underline:before': {
              borderBottomColor: 'white'
          },
      },
      label: {
          color: 'white'
      }
  }));
  
  const theme = createMuiTheme({
      palette: {
          primary: green,
      },
  });
  
  
  const inputReducer = (state, action) =&gt; {
      switch (action.type) {
          case 'CHANGE':
              return {
                  ...state,
                  value: action.val,
                  isValid: validate(action.val, action.validators)
              };
          case 'TOUCH': {
              return {
                  ...state,
                  isTouched: true
              }
          }
          default:
              return state;
      }
  };
  
  const Input = props =&gt; {
      const [inputState, dispatch] = useReducer(inputReducer, {
          value: props.initialValue || '',
          isTouched: false,
          isValid: props.initialValid || false
      });
  
      const { id, onInput } = props;
      const { value, isValid } = inputState;
  
      useEffect(() =&gt; {
          onInput(id, value, isValid)
      }, [id, value, isValid, onInput]);
  
      const changeHandler = event =&gt; {
          dispatch({
              type: 'CHANGE',
              val: event.target.value,
              validators: props.validators
          });
      };
  
      const touchHandler = () =&gt; {
          dispatch({
              type: 'TOUCH'
          });
      };
  
      const classes = useStyles();
  
      return (
          &lt;ThemeProvider theme={theme}&gt;
              &lt;TextField
                  className={classes.input}
                  InputProps={{
                      className: classes.root
                  }}
                  InputLabelProps={{
                      className: classes.label
                  }}
                  id={props.id}
                  type={props.type}
                  label={props.label}
                  onChange={changeHandler}
                  onBlur={touchHandler}
                  value={inputState.value}
                  title={props.title}
                  error={!inputState.isValid &amp;&amp; inputState.isTouched}
                  helperText={!inputState.isValid &amp;&amp; inputState.isTouched &amp;&amp; props.errorText}
              /&gt;
          &lt;/ThemeProvider&gt;
      );
  };
  
  export default Input;
  </code></pre>