score:2

Accepted answer

Not sure i can provide a right or wrong answer for this question as each has its pros and cons.
My rule of thumb is to connect deeply nested components only when their parents are "proxies of props". That is they accepts props only to pass them down to their children.

If i may quote (myself) from this answer:

Avoid connecting components when you can and pass down the props to the children, the main reason for this is to prevent dependency on redux. I prefer keep my components "dumb" as i can and let them concern only on how things should look. I do have some components that concern on how things should work and these components are mainly dealing with logic and passing down data to the children, they are the components i often connect.

When i notice that my app is scaling and some of my components are acting as a proxy of props (i even got a word for that! "Propxy"), that is they get props from their parent and pass them down without using them, i usually inject a connected component in the middle of the components tree so i can let the "propxy" components down the tree flow be more lighten and slim

You should also note that one more pitfall with connected components is that each render will trigger the mapstateToProps method. if you got some heavy logic there you should memoize it, usually done with reselect

As for the benefit of connecting a component, well you probably realize that already. you get quick access to the Provider's state via react's context.

Edit
As a followup to your comment:

about the rendering - wont I have much more unnecessary rendering if Ill have a deep nested children (common in medium to large apps) that will be unnecessarily re rendered on each parent update

Well the connect HOC wrapper won't trigger a re-render if the previous object of mapStateToProps is the same as the current object returned. so no unnecessary re-renders to your connected component will take place.
You can read in more details on how it works and how the logic was evolved over time in this article

score:0

I use the first option. The cons you wrote are correct, but i think its easier to debug and understand the data flow this way.

score:0

  • Don't connect a component to redux if the current component doesn't use this data from redux and only passes.
  • If the component uses data then connect to redux.
  • If the current component uses data from redux and the next component also uses it then you can pass and don't need to connect the next component to redux.

MAIN RULE: if there is a gap in the data usage chain from parent to child then don't need to pass data from parent to child

connect(parent) (don't use props) => child (don't use) => child (don't use) => child (using) - better to connect last child. Isuue related to props dreeling


Related Query

More Query from same tag