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

Question

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:

• If I place the Dialog component as the child of List, List component can become very bulky - a List component may contain different types of ListItem components (SingleListItemFoo, SingleListItemBar...) and each ListItem component may have its own specific Dialog components (DialogFoo, DialogBar...).
• If I place the Dialog component as the child of SingleListItem, every single SingleListItem will contain a Dialog component. If there are 1000 SingleListItem in a List, the extra content can make the app slow.

Answer 1

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.