Prevent Formik re-rendering for specific fields

Question

I have a form in my React app using formik-wizard where on a couple pages I have a modal with additional fields. Every time I type in a field within the modal it is re-rendering, only allowing me to type one letter a time. Is there a way to prevent Formik from re-rendering on each value change?

Here's an example of what I am experiencing: https://gyazo.com/cedfb347a01516dd2b2da94787ed332c

Answer 1

The problem is probably with your wizard. The wizard shouldn't be showing on and off on each render, but your question isn't that, so I will answer you question.

Is there a way to prevent Formik from re-rendering on each value change?

Yes, but there's more than one way to solve this.

1. You could create a custom input that uses a internal state and only updates the formik values when the user blurs (onBlur event) the input, this way it will have less rederings.
2. You could also remove the validations when the input changes or when the input blurs (that can cause the component to rerender), and it will only validate on the submit. (answer on how to do this)

Will these approaches solve your problem?

I don't know, you didn't show you code and I can know for sure what is making the wizard appears on every change without looking at the code, but this answer your question.