Passing the content of a <TextInput /> on end and submit callbacks.

[ZakaHaceCosas]

Introduction

RN's TextInput has many callbacks, like onChangeText, onSubmitEditing, onEndEditing..., however only onChangeText passes the current text as an argument to the callback function. Would it be possible to do the rest with onEnd and onSubmit?

Details

RN's documentation itself provides an example similar to this one:

const [text, onChangeText] = React.useState('Useless Text');

return (
  <TextInput
    style={styles.input}
    onChangeText={onChangeText}
    // or if we want to get explicit / do something else with the text:
    // onChangeText={(value) => {onChangeText(value)})
    value={text}
  />
)

Here, every keystroke updates the state (text) and triggers a re-render of the component. Wouldn't it be more performant to update the state when the user is finished?

For instance:

const [text, onChangeText] = React.useState('Useless Text');

return (
  <TextInput
    style={styles.input}
    onSubmitEditing={(value) => {onChangeText(value)})
    value={text}
  />
)

This should perform better because you only update the state once, when the user is done with editing. It would also make stuff more flexible, since the dev would be able to interact with the raw value always, without needing a useState() that changes on every edit just to have the input's text content.

Discussion points

1. Reduce state updates for performance
2. Make <TextInput /> more flexible