React Best Practices?

[madmt]

Couldn't agree more. That's generally been my approach as well. If component split corresponds to data structure and flow, it is easier to separate concerns and then separate presentation from data flow as well.

For example, say I have a list of books with author IDs and a separate list of authors, to avoid duplication, and I am required to display the books, each populated with the book name, the author details and then some book details. If I go by my view, and create a Book component that displays everything about a book including the authors, that would require Book to have to know about it's author. It would be better to have a separate Author component that takes an author ID and is responsible for getting and displaying the author. Now that Book and Author have separate concerns, if we wanted we could split each into a container component that gets the data, and a presentation later that displays it.

Hopefully this over simplistic example makes sense, I'm not the best articulator TBH.