Slow response with multiple controlled text inputs

Question

I have a form with several text inputs. I have all of them configured as managed inputs. When typing to display new text, a delay of several seconds appears in the field. Here is an example field:

<label>Event Name</label> <input type="text" placeholder="Title" className="form-control" name="title" value={this.state.event.title} onChange={this.handleChange} /> 

I can’t understand why it is so slow or what to do to fix it.

UPDATED: here the component should be enough to show what is happening.

 let CreateEventForm = React.createClass({ submit: function () {}, handleChange: function(e){ let value = e.target.value; let name = e.target.name; if(value === 'true'){ value = true; } if(value === 'false'){ value = false; } // If true/false toggle old let oldState = this.state.event[name]; if(typeof oldState === 'boolean'){ value = !oldState; } // If is array if(name.indexOf('[]') > -1){ name = name.replace('[]', ''); oldState = this.state.event[name]; var pos = oldState.indexOf(value); if(pos > -1){ oldState.splice(pos, 1); } else { oldState.push(value); } value = oldState; } let event = this.state.event; event[name] = value; this.setState({event: event}); console.log(this.state.event); }, getClasses(field, additionalClasses = []) { // If a string is passed for additional class, make array if(!Array.isArray(additionalClasses)){ additionalClasses = [additionalClasses]; } let useDefaultColumns = additionalClasses.filter(function(className){ return className.indexOf('col-') > -1; }).length === 0; let hasError = function(){ let fields = Array.isArray(field) ? field : [field]; return fields.filter(function(field){ return !this.props.isValid(field); }.bind(this)).length > 0; }.bind(this)(); return classnames({ 'col-sm-4': useDefaultColumns, 'form-group': true, 'has-error': hasError }, additionalClasses); }, render: function () { return ( <form ref="eventForm" onSubmit={this.submit}> <SavedModal isOpen={this.state.saved} reset={this.resetForm} style={this.state.modals.styles} /> <h3>Info</h3> <div className="row"> <div className={this.getClasses('title')}> <label>Event Name</label> <input type="text" placeholder="Title" className="form-control" name="title" value={this.state.event.title} onChange={this.handleChange} /> {this.renderHelpText(this.props.getValidationMessages('title'))} </div> </div> <div className="row"> <div className={this.getClasses('type')}> <label>Event Type</label> <select name="type" className="form-control" value={this.state.event.type} onChange={this.handleChange} onBlur={this.props.handleValidation('type')}> <option value="">Select Event Type&hellip;</option> {this.state.calendarTypes.map(function (type, key) { return <option value={type.name} key={key}>{type.name}</option> })} </select> {this.renderHelpText(this.props.getValidationMessages('type'))} </div> </div> <h3>Duration</h3> <div className="row"> <div className="form-group col-sm-2"> <input type="checkbox" name="allDay" checked={this.state.event.allDay} onChange={this.handleChange}/> All Day </div> </div> <div className="row"> <div className="form-group col-sm-2"> <input type="checkbox" name="repeats" checked={this.state.event.repeats} onChange={this.handleChange}/> Repeats&hellip; </div> <br/><br/> </div> <h3>Location</h3> <div className="row"> <div className={this.getClasses('location')}> <select name="location" className="form-control" value={this.state.event.location} onBlur={this.props.handleValidation('location')} onChange={this.handleChange}> <option value="">Select a Location&hellip;</option> {this.state.locations.map(function (location, key) { return ( <option value={location.name} key={key}>{location.name}</option> ); })} </select> {this.renderHelpText(this.props.getValidationMessages('location'))} </div> </div> <h3>Description</h3> <div className="row"> <div className={this.getClasses('description')}> <label>Write a description:</label> <textarea className="form-control" name="description" value={this.state.event.description} onChange={this.handleChange} onBlur={this.props.handleValidation('description')} rows="10"></textarea> {this.renderHelpText(this.props.getValidationMessages('description'))} </div> </div> <h3>Event Details</h3> <div className="row"> <div className={this.getClasses('fee')}> <label>Fee:</label> <input type="text" className="form-control" name="fee" value={this.state.event.fee} onChange={this.handleChange} onBlur={this.props.handleValidation('fee')}/> {this.renderHelpText(this.props.getValidationMessages('fee'))} </div> </div> <div className="row"> <div className="col-sm-12"> <button className="btn btn-primary" type="submit"> Create Event </button> </div> </div> </form> ); } }); 

Answer 1

I had a similar situation and my solution was to disable React Dev Tools. They somehow influenced input fields. The problem is that it’s not enough to refresh the page if you clicked on the “React Tools” tab. They still affect your inputs. You must open a new page to stop them. You can also completely remove them from Chrome, but I do not recommend doing this because they are useful. :)

Answer 2

There are many possible reasons for this. I ran into a similar problem and filtered out the root cause:

• Big state so it takes time
• React Dev Tool / Using Unified Response
• Mutant Status Data

Whatever the reason, I found a quick solution to this. If you just want to keep it in a state, but not used for real-time visualization. Then you can safely replace onChange with onBlur. It has no deal and no delay. If you know any other case where this does not work, let me know!

Change the code as follows:

 <label>Event Name</label> <input type="text" placeholder="Title" className="form-control" name="title" value={this.state.event.title} onBlur={this.handleChange} /> 

Answer 3

Here is an example of an input template, a Connect or a template for working with large forms in React? . The main thing is to have your input as a component that transfers changes to the parent object, but does not update it from the props if they are the same.

Answer 4

I had redundant logger middleware to create this input delay. So try disabling this too.

Answer 5

My problem was that my state object was complex and thus caused rendering problems. My solution was to manage the state of notes in my component, and then, when blurring, update the state of the container.

 const { data, onEdit } = props; const { containerNotes } = data; const [notes, setNotes] = useState(''); useEffect( () => { setNotes(containerNotes); }, [containerNotes], ); const onChangeNotes = () => ({ target: { value } }) => { setNotes(value); }; const onBlurNotes = (prop) => ({ target: { value } }) => { const newData = update(data, { [prop]: { $set: value }, }); onEdit(newData); }; return ( <input type="text" placeholder="Title" name="title" value={notes} onChange={onChangeNotes()} onBlur={onBlurNotes('containerNotes')} /> )