Should the parent or child component fetch data in React?

Question

I am building a React Native app and I have a ListingsScreen component that essentially takes an array of listings and displays them in a FlatList. The app will have different instances of this ListingsScreen based on the types of listings I want to display.

My question is, should the component that is rendering the ListingsScreen fetch the data from the server and then pass the data as a prop to the ListingsScreen, or should the parent component pass an endpoint prop down to the ListingsScreen and then the ListingsScreen fetches the data based on the endpoint provided and then stores the listings in its own local state?

Part of what is confusing me is that the ListingsScreen has a component that allows the user to sort and filter the listings. So when a user filters data I have to make another backend call. If the Parent component is in charge of fetching the data, then it also has to know about the filters being applied by the ListingsScreen. As opposed to if the ListingsScreen is in charge of fetching data, the parent only has to provide the endpoint a single time and then the ListingsScreen handles everything else.

Maybe I'm overthinking it but I'm still fairly new to react and making backend calls in general so I'm a little confused.

Thank you to anyone that can help with this!

Answer 1

Where you fetch data really depends on your use specific use-case. Typically you would/should co-locate all the logic that fetches data and handles wrangling it for consumption by other components. Think Redux-Thunks, RXJS-Epics, Redux-Sagas, and more simply the React Context API, and even more simply a plain React ( "parent" ) component.

1. If you do the data fetching in your parent component then you would want to also place the sorting/filtering logic and handlers also in the parent. You would then pass the data and the callbacks as props to a child component. The child simply renders the data its given, and renders the UI to invoke the callbacks to "let the parent know" that it needs to do some work.

   • A benefit here is that your children components can be pretty "dumb". They just need to know how to render the UI and that's about it. All the heavy lifting is left in the parent.

   • A con may be that the parent component would necessarily need to know how to fetch all the data, and how to handle it.

2. The alternative is to have the parent component really do nothing other than manage what children are being rendered and let each child handle its own data state and logic.

   • A benefit here is that each child can render entirely different types of data and the offloads the responsibility from a central parent component.

   • A con is this may lead to duplicate code/logic if not maintained well.

Where you don't want to find yourself is somewhere between the two where the parent is responsible for fetching and holding the data in state, but delegates the state update functions as callbacks to children. This, in-a-way, couples the children components to the parent couple such that each child is responsible for maintaining the state invariant of the parent.