I’m building a form with 24 inputs split into 3 children.

Parent

* Props -> Child 1

o Field 1 - onChange
* Props -> Child 2
* Props -> Child 3

I don’t know if I’ve done this correctly but if I update a text field on child 1’s field 1 using onChange which calls parent’s handleChange – it re-render all children on every keystroke – which is very expensive and very slow as each children have 8 inputs each.

Most of the example code works fine because they’re very trivial but when it starts to grow, maybe recommended approach doesn’t work?
Is there any other way to do this while maintaining controlled nature of my inputs? Seeing controlled component is a recommended way.

I do have redux but I wasn’t going to use it for each keystroke onChange, rather just use it for save, retrieve etc.

Any ideas?