reactjs - Use Connect or pass data as props to children

Question

I am new to react and redux. I have a scenario where there are nested components like this.

A > B > C > D

There is a property used in A component and it will be used in D component. So, I have two approaches:

1. Get state from redux store in component A and then pass it along as props to all it's child components even though it will be used only in D component.
2. I should connect to redux store in component D and fetch that property from there.

What is the correct approach?

Answer 1

As Dan Abramov, author of redux says in this issue

Both approaches of passing props down to children or connecting them to the store are appropriate, however having nested connect() components is actually going to give you more performance. The downside is they're slightly more coupled to the application and slightly harder to test, but that may not be a big issue.

He has also articulated a nice rule of thumb to follow on reddit

I do it this way:

• Start by using one container and several presentational components
• As presentational component tree grows, “middle” components start to pass too many props down
• At this point, I wrap some leaf components into containers so that “middle” components don’t need to accept and pass down props that are completely unrelated to them
• Repeat

He has even tweeted regarding this:

Try to keep your presentation components separate. Create container components by connecting them when it’s convenient.Whenever you feel like you’re duplicating code in parent components to provide data for same kinds of children, time to extract a container.

So in simple words:

You can use connect() at any level. Doing so makes the component smart, since it knows where its props come from. A dumb component just has props, and they could come from anywhere. A smart component is coupled to redux; a dumb component is not.

UPDATE: react-redux v7 and above

The same concept applies to useSelectors too. You can receive data in a container component and pass on to your presentational components, if multiple of its children make use of the same data

If however the data used by the children is different, you can choose to use useSelector individually within the child component. This will make sure that only those components re-render which actually need to