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!

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!

• javascript
• reactjs
• react-native

2 Answers 2

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 component such that each child is responsible for maintaining the state invariant of the parent.

If you fetch the data on PARENT COMPONENT

• child components become more reusable
• you might be fetching too much data if you are using the child component in different places. Maybe your child component need one prop in one place and another prop in other place but now you have to put the both props to the definition of child component
• if you are using the child component in two different location, in each location you have to do data fetching to pass the result to the child component.

if you fetch the data on CHILD COMPONENT

• child components are less reusable
• you get n+1 query issue. From here

You might expect that many small queries would be fast and one large, complex query will be slow. This is rarely the case. In practice, the opposite is true. Each query has to be sent to the database, the database has to perform the query, then it sends the results back to your app. The more queries you perform, the more time it takes to get the results back, with each trip to the database server taking time and resources. In contrast, a single query, even if it's complex, can be optimized by the database server and only requires one trip to the database, which will usually be much faster than many small queries.

In your example you have ListingsScreen and probably show each listing in card and usually this card will also have a slug upon pressed you will get the properties of this listing. If you fetch the slug in each listing component, you might end up making incredible number of fetches