React slow with multiple controlled text inputs

Question

I have a form with multiple text inputs. I have them all set up as controlled inputs. When typing, there is a lag of up to several seconds for the new text to display in the fie

Answer 1

There are many possible reasons for this to happen. I faced the similar issue and filtered the main cause to:

• Large State, so it takes up sometime
• React Dev Tool / Use of non minified react
• Mutating state data

Whatever may be the reason, I found a quick fix for this. If you just want to store it to the state but not using it for live rendering. Then you can safely replace the 'onChange' to 'onBlur'. This has no dealay and lag. If you know any other case where this will not work, do let me know!

Change the code as follow:

Event Name