CODEWITHSUNDEEP
reactjs
C.Lee
C.Lee

Reputation: 11269

React: Parent or child? How to decide where to put a component?

When developing using React, often there are components that are related to both a parent component and its children components. I always have a hard time to decide where I should put this type of components.

For example, a List component (parent) contains many SingleListItem components (children). When a user clicks a SingleListItem component, a Dialog component will popup. Should I place the Dialog component as the child of List or SingleListItem?

Please correct me if I am wrong:

Upvotes: 3

Views: 601

Answers (1)

wintvelt
wintvelt

Reputation: 14101

My first inclination is to decide who is the parent of the dialog (list or listitem) based on
a. positioning of the dialog:

  • If the dialog is positioned in relative to the listitem (e.g. like a dropdown with options) - then making dialog a child of the listitem makes more sense.
  • If the dialog is positioned relative to the parent (e.g. are you sure you want to delete-type of modal) - then dialog as child of parent makes more sense.

And on
b. effects of the dialog:

  • If dialog outcome ONLY effects a single listitem, without the need to fully re-render the list (e.g. change color of listitem, stored in react state) - then dialog as child of listitem makes more sense
  • If dialog outcome may trigger re-render of list (e.g. delete or re-order items), then dialog as child of the list makes more sense.

There is no difference between list or listitems choice in relation to your other points:

  • If there is only 1 flavor of dialog, you only define the dialog once. And you only render the dialog once (either from the list, or from the 1 listitem that needs to render the dialog).
  • If you have more flavors like dialogBar and dialogFoo, this is also equally bulky, either in the list, or in the listitem.

As to the amount of code there is also no difference:

  • You have 1 code-set for the list, and 1 code-set for the dialog, and also 1 code-set for the list-item. If you render 1000 listitems, your code-set doesn't get copied 1000 times.
  • If you have e.g. 10 lines of code to trigger the dialog, these 10 lines need to go either in the listitem.js file, or in the list.js file.

The only difference is: if you put the dialog in listitem, your code to evaluate whether or not to display the dialog will be executed 1000 times. But it is practically impossible to make such an evaluation inefficient enough to notice any difference at all. Even with a 1000 lines. And as pointed out, there will be many other reasons not to render a 1000 lines if they do not fit on screen.

Hope this helps.

Upvotes: 6

Related Questions