React and text inputs - use onBlur or onChange?

Question

I am working on a form with about 6 text input fields.

To save the values to my state, is it better to do so onBlur or onChange?

F

Answer 1

onChange. I wouldnt try to over-optimize the re-renders you're seeing unless it is something actually noticeable to an end-user. Usually isnt an issue unless you have larger forms. Typically when working with forms in React, you use controlled fields where react maintains the state and passes the value back down into the field (see https://reactjs.org/docs/forms.html#controlled-components), in which case it really only makes sense to use onChange for maintaining the state value.

If you do end up needing to optimize further, you can split up parts of your form into separate components that use PureComponent or shouldComponentUpdate to prevent those parts of the form from re-rendering unnecessarily.