Fetching from store vs. letting the parent fetch and deliver via props

Question

Too many times when developing a component, I find myself wondering whether the component should fetch its data directly from the store, or have it passed via props - presumably to let the parent (or any higher ancestor) fetch it instead. Also, I tend not to split between smart/dumb components. What do you think about it? What are the tradeoffs?

As I see it, the tradeoff for having a direct fetch vs pass-via-props is:

• Makes the component harder to test, since you do not have to mock the store for it every test.
• Means smaller, cleaner code
• Makes the component less portable, that is you cannot simply change what's fetched from the store
• Is less performant, if you render a couple of instances of the same type (e.g. if you're making a hundred elements long list, it's more performant to let the parent fetch it all with one useSelector then pass data via props, rather than let every list item fetch data for itself)

Answer 1

If the same data is being used by many components, it is better to fetch it via the store. The other advantage is, if there is a need to pass data to the n-level nested component, where n is quite big, it is better to use the store rather than passing props as it may make your component simpler to write.

These are the reasons I prefer using the store. But it is not a generic answer. One can have their own perceptions of this.