Where to store the state of a complex form in react
let us consider a complex form of registering a driver and owner
the driver will have all these fields
driver = { firstName: "xyz", lastName: "abc", phone: "1234", email: "m@g.com, licence: "xy1234" } And owner has the following fields
owner = { firstName: "xyz", lastName: "abc", phone: "1234", email: "m@g.com, vehicle: "1234" } notice how they both have 4 inputs in common so it makes sense to create a reusable component called User, so our component heirarchy becomes
Driver User licence input
at this point if i want to make a post request on the driver data I will have to store the state in the driver and update the state of the driver whenever my inputs in the user component or the licence field changes (onChange)
The catch with this is that the The Entire Driver component re-renderes whenever a single input changes. and this creates a problem when you have a lot of nested components (since the parent re-renders all its children whenever one of them changes)
What is the best design-pattern for this solution?
Ps. this is has been the most challenging part of React for me
