After a lot of search and working with React and React Native. I still have a pretty vague opinion on which is best to use and in what situations

1. Having the parent ponent be connected to the store and passing as props all data to children functional ponents. This what I initial though was the "React" way but pretty soon I saw that as the app grow the amount of logic handled by this parent ponent starting too be to big and messy.Also child ponents start to have children of its own and so on and so forth.

2. Having parent ponent (Screen for example) that is functional and each child that needs information from the store will be connected to it. This is much more "clean" solution but will create a lot of store connection "duplications" which are not necessary.

Using Redux store

My question in general which is more remended pattern to use and in which use cases, also would be nice to know what is the price for having a lot of connected (containers) ponents

After a lot of search and working with React and React Native. I still have a pretty vague opinion on which is best to use and in what situations

1. Having the parent ponent be connected to the store and passing as props all data to children functional ponents. This what I initial though was the "React" way but pretty soon I saw that as the app grow the amount of logic handled by this parent ponent starting too be to big and messy.Also child ponents start to have children of its own and so on and so forth.

2. Having parent ponent (Screen for example) that is functional and each child that needs information from the store will be connected to it. This is much more "clean" solution but will create a lot of store connection "duplications" which are not necessary.

Using Redux store

My question in general which is more remended pattern to use and in which use cases, also would be nice to know what is the price for having a lot of connected (containers) ponents

• javascript
• reactjs
• react-native
• react-redux

• 1 2nd one is more remended, with Redux as debugging with Redux devtools for Chrome is easy. Common props in child ponents should be extracted to a global store/state. If you have a lot of connected ponents, update to 1 variable in the store will cause re-renders/updates in all ponents, thus lagging. You need to then either disintegrate your stores more(preferred), or use shouldComponentUpdate. – Vinayak Bagaria Commented Apr 1, 2019 at 18:05
• 1 Thank you, this reenforce my thoughts exactly – Blue Bot Commented Apr 1, 2019 at 20:26

3 Answers 3

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 ponents 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 ponents 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 ponents "dumb" as i can and let them concern only on how things should look. I do have some ponents that concern on how things should work and these ponents are mainly dealing with logic and passing down data to the children, they are the ponents i often connect.

When i notice that my app is scaling and some of my ponents 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 ponent in the middle of the ponents tree so i can let the "propxy" ponents down the tree flow be more lighten and slim

You should also note that one more pitfall with connected ponents 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 ponent, 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 ment:

about the rendering - wont I have much more unnecessary rendering if Ill have a deep nested children (mon 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 ponent will take place.
You can read in more details on how it works and how the logic was evolved over time in this article

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.

• Don't connect a ponent to redux if the current ponent doesn't use this data from redux and only passes.
• If the ponent uses data then connect to redux.
• If the current ponent uses data from redux and the next ponent also uses it then you can pass and don't need to connect the next ponent 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