Question 35489 in React native Question posted in
The official React Native documentation can be found here.

React Native: Proper way to handle huge forms

I have an application developed for internal users. The home page of the app has at least 30 input fields.

<TextInput onChangeText={onChangeNumber} value={number}/>

I have onchangeText for all the 30 inputs, in the future I might add more fields. I don’t think adding onchange to all the fields is the best way to do it. How can I optimize the approach? Are there any 3rd party packages where it doesn’t re-render for every input change and only captures data on submit?

Tags:

3

Answers


  1. 0

    Try using onEndEditing, as per docs:

    onEndEditing
    Callback that is called when text input ends.

    So just changing to
    <TextInput onEndEditing={onChangeNumber} value={number}/> should do

    There are a few other alternatives on the docs, you might check to see the one that fits you better.

    https://reactnative.dev/docs/textinput#onendediting

    Login or Signup to reply.
  2. 0

    the way I handle large forms is this,
    Store your form data in an object using useState like this,

    const [formData, setFormData] = useState({name: "", age:""})

    you can pass "onChangeText" like this,

    <TextInput
   value={formData.name}
   onChangeText={value => setFormData(prev => { return { ...prev, name: value } })}
/>

    I would suggest creating a separate component for "TextInput", so you can also handle validations in it.

    Login or Signup to reply.
  3. 0

    You should try formik + yup.

    I am using it in several projects and this is the best way to manage little and big forms!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search