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.

EDIT: The problem seems to be with my onChange handler.

Any help is much appreciated. Thanks in advance.

This is my custom input 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) => ({
    root: {
        color: 'white'
    },
    input: {
        margin: '10px',
        '&& .MuiInput-underline:before': {
            borderBottomColor: 'white'
        },
    },
    label: {
        color: 'white'
    }
}));

const theme = createMuiTheme({
    palette: {
        primary: green,
    },
});

const inputReducer = (state, action) => {
    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 => {
    const [inputState, dispatch] = useReducer(inputReducer, {
        value: props.initialValue || '',
        isTouched: false,
        isValid: props.initialValid || false
    });

    const { id, onInput } = props;
    const { value, isValid } = inputState;

    useEffect(() => {
        onInput(id, value, isValid)
    }, [id, value, isValid, onInput]);

    const changeHandler = event => {
        dispatch({
            type: 'CHANGE',
            val: event.target.value,
            validators: props.validators
        });
    };

    const touchHandler = () => {
        dispatch({
            type: 'TOUCH'
        });
    };

    const classes = useStyles();

    return (
        <ThemeProvider theme={theme}>
            <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 && inputState.isTouched}
                helperText={!inputState.isValid && inputState.isTouched && props.errorText}
            />
        </ThemeProvider>
    );
};

export default Input;

```