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

I would suggest if you are already using redux in your app then set the property in the redux store and fetch it in the component D.

But if the work flow is really simple and all the data is fetched from a single source per view, you can avoid redux as it is for complex state management.

Answer 2

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.