You should use setState to update the state instead of simply modifying the existing state:
// Badvalidate = (event) => { const value = event.target.value; const valid = validator[this.props.type](value); this.state.value = value; this.state.valid = valid;}// Goodvalidate = (event) => { const value = event.target.value; const valid = validator[this.props.type](value); this.setState({ value, valid })}
The end result is the same: this.state is changed to its new value. However, if we directly update the this.state object, then React must poll the value of this.state regularly to be notified of any changes. This is slow and inefficient, and not how React is implemented. Instead, by changing the state via the this.setState ...
