Which component should own services in React?

Question

I am making an app with multiple top-level pages and a menu. One of the pages loads some data from the server and displays it in a table.

Should the page that displays the table call the server when it mounts and store the data in its state, or should it accept the data in its properties?

Answer 1

So your question is, should a tableview own its own data or receive it from the parent?

First, if the table data is used elsewhere, then you certainly want to own them higher in the hierarchy and pass them down as props to the tableview.

If not, then it depends on your use case. If it's a generic tableview, I'd say pass the data down as props as to promote the reuse of this tableview elsewhere; If the view is already very specific to your app then don't bother: just store the data as state. Personally, if my situation is the latter, I'd check to see if the tableview is reusable and convert it into the first, thus: App -> specificTableViewDataComponent -> genericTableView. The nice thing with React's architecture is that you can do this refactoring at later time, and only if needed.