Formik and Semanic UI React. Delay on typing, unnecessary validation

Question

Here is a simple example of my dynamic form.

<Form.Group widths='equal'>
                    <Form.Input onChange={props.handleChange} fluid name={`${type}.${participant.number}.firstName`}
                                label={FIRST_NAME}
                                placeholder={FIRST_NAME_MODEL_DESCR}/>
                    <Form.Input onChange={props.handleChange} fluid label={LAST_NAME}
                                name={`${type}.${participant.number}.lastName`}
                                placeholder={LAST_NAME_MODEL_DESCR}/>
       </Form.Group>

in the Fromik itself i have simple console.log

    validate={values => {
        console.log(values);
    }}

So on every time when i'm typing into field, on every key press i'm getting log results from validation (which i don't want) and it has micro delay, on every key press down.

Well, you put in input fields onChange function. That is the reason why is it happening. What would you like to achieve? — Lazar Nikolic, Sep 22 '18 at 16:16
how else could i get the value of input field? this "handleChange" is a Formik function. I would like to have all my values validated on submit only. — Andrii Fedorenko, Sep 22 '18 at 16:26

score 3 · Accepted Answer · answered Sep 22 '18 at 16:31

3

Pass validateOnChange (and validateOnBlur if you want to disable that too) with a value of false to the Formik component (https://jaredpalmer.com/formik/docs/api/formik#validateonchange-boolean)

answered Sep 22 '18 at 16:31

TLadd

6,488
2
32
40

Still the whole form is rerendering when i'm typing into field. For change i'm using handleChange. – Andrii Fedorenko Sep 29 '18 at 14:01
2

Yeah, it does because Formik holds the state of your form and the rest of your form is a child, and when a parent component re-renders, so does all of it's children unless shouldComponentUpdate returns false somewhere in the component tree. So if you need to prevent part of your form from re-rendering (usually isn't necessary unless you have a larger form), split your form fields out into separate components and use PureComponent to prevent components whose props don't change from re-rendering. – TLadd Sep 29 '18 at 22:41
Hi @TLadd, can you tell me or show an example of how to do that? I'm having the same problem with slowness because of re-renders using `` -> `
` -> ``
– Guilherme Moretto May 26 '21 at 11:41
@GuilhermeMoretto The Formik docs detail how to deal with performance problems using FastField https://formik.org/docs/api/fastfield. I'd give this a read. – TLadd May 26 '21 at 19:08

score 0 · Answer 2 · answered Sep 22 '18 at 16:34

If you would like to validate your fields on submit only, and since you are using Semantic-UI-React's Form component, I suggest using onSubmit handler function that Semantic is offering.

<Form onSubmit={this.handleSubmit}>
  <Form.Group>
    <Form.Input placeholder='Name' name='name' value={name} onChange={this.handleChange} />
    <Form.Input
      placeholder='Email'
      name='email'
      value={email}
      onChange={this.handleChange}
    />
    <Form.Button content='Submit' />
  </Form.Group>
</Form>

With this to set your input value to the state handleChange = (e, { name, value }) => this.setState({ [name]: value })

And you can use this function to handle with formic your data validation

  handleSubmit = () => {
    const { name, email } = this.state

    // here you can use formic to validate name and email
  }

Formik and Semanic UI React. Delay on typing, unnecessary validation

2 Answers2