Do forms in React have bad performance?

Question

I'm learning how to use <form>'s in React and most examples I've seen use a combination of state and onChange to keep track of your form's inputs:

class Form extends React.Component {      
  handleChange(event) {
      this.setState({
          inputvalue: event.target.value
      })
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit.bind(this)}>
           <label>Name</label>
           <input type="text" value={this.state.inputvalue} onChange={this.handleChange.bind(this)}/>
           <input type="submit" value="Submit"/>
      </form>
    );
  }
}

However, say I have numerous <input>'s and even some <textarea>'s which might change quite often. In that case each one of them would call the onChange method each time they are updated and the component would re-render on every key press.

Seeing as how people can type pretty fast, could this be an area for concern?

I'd love to see a super detailed answer from someone intimately familiar with react's code but in my experience as a user of react, it's not something to worry about for the average react app. Common sense says it must be slower than letting a browser do its native thing, but react has been optimized for this kind of situation and I don't think you'd notice any lag under normal circumstances. — Rose Robertson, Sep 25 '18 at 19:41
That said, if you are worried about performance I wouldn't bind your functions in the render method like you are. That means you create a new function instance every render and so react will end up doing more work than necessary. Better to bind in the constructor when you're worried about rendering too much. — Rose Robertson, Sep 25 '18 at 19:45
Forms don't. Apps do. The comment above has a good point about bind. If you're concerned about frequent updates, you can debounce onChange. — Estus Flask, Sep 25 '18 at 20:05

cesargdm · Accepted Answer · 2018-09-25T19:31:57.517

In a small testing I discovered that React successfully performs a shallow compare in the state and changes in the DOM in just the components that need a re-render. In Chrome I enabled the highlights (Paint Flashing) of the areas that were repainted by React in the DOM.

See the Paint Flashing in action.

In my example note that onChange will run on every keystroke to update the React state, the displayed value will update as the user types (based on the React Docs https://reactjs.org/docs/forms.html#controlled-components).

Also you can see my code here: https://codepen.io/anon/pen/KxjJRp

class Application extends React.Component {
  state = {
    value1: "",
    value2: "",
    value3: "",
    value4: ""
  }

  onChange = ({target: {value, name}}) => {
    this.setState({
      [name]: value
    })
  }

  render() {
    const { state: { value1, value2, value3, value4 } } = this
    return (
      <div>
        <label>Value 1</label>
        <input type="text" value={value1} name="value1" onChange={this.onChange}/>
        <label>Value 2</label>
        <input type="text" value={value2} name="value2" onChange={this.onChange}/>
        <label>Value 3</label>
        <input type="text" value={value3} name="value3" onChange={this.onChange}/>
        <label>Value 4</label>
        <input type="text" value={value4} name="value4" onChange={this.onChange}/>
      </div>
    )
  }
}

score 0 · Answer 2 · answered Sep 25 '18 at 19:08

I am not totally sure of the best way to handle this but I could see an implementation of setting an onblur method to handle updating state. onChange would be constantly updating but this might not be the worst thing as it likely will not re-render the page with every keystroke.

Do forms in React have bad performance?

2 Answers2