2

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-renders 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?

jonrsharpe
  • 1,318
  • 2
  • 12
  • 17
Malik Bagwala
  • 137
  • 2
  • I think this is more of a question for Stackoverflow. Make sure that you provide a code example to give a more clear situation on what you are dealing with. Quick hint: https://reactjs.org/docs/react-component.html#shouldcomponentupdate – J.D. Jul 30 '19 at 14:14
  • @J.D. I did post it on stack overflow but it got closed saying that it was opinion based. that is why i posted it over here – Malik Bagwala Jul 31 '19 at 04:23

0 Answers0