title: Should the parent or child component fetch data in React?
body: <p>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.</p>
  <p>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?</p>
  <p>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.</p>
  <p>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.</p>
  <p>Thank you to anyone that can help with this!</p>