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?

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: 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 Jul 31 '19 at 4:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.