Throw props or create a lot of containers?

Question

React

Greetings)
Let's say there is an App component that contains other components (Catalog, Baner, AboutUs ...) . And those components contain other sub-components, and those still some ..... the level of nesting can be very large ...
What is the best way to do it?
Each smart component (Catalog, Baner, AboutUs ...) creates a container and connects it to the Store. It turns out that there can be a lot of containers ...
Or to pass props from the App through a bunch of levels to the desired component? Then it turns out that the App has a huge number of props ...
How would it be more correct .... How are you doing?

Answer 1

Too much nesting is bad, use component composition .
A good article on the topic of organizing an application

Answer 2

Look, throwing a bunch of props through the entire application is very wrong. If any props changes, it will cause the update of all components through which it is explicitly passed, even if it is not used there. If you really want to use this path, then it's better to use React Context .
Concerning creation of containers - here a question of style. I quite often see such a separation in projects:
components - all stateless components and also components where only the state from redux is needed, here it’s just that the component itself is wrapped in connect ()
containers - components where both the state and actions are needed, here you need to remember the main properties (from famous article) containers, i.e. no layout, it is possible to use only other components, etc.
Although it is most correct to break the application into small and universal components, as described above. It's certainly not as easy in the beginning as compared to uber components, but then it all pays off with a vengeance.