React + Redux - Why not connect all the components?

Question

Iv'e heard a nomerous of times that it is a good practice to @connect only the top level (smart components) and then they can propogate the props to their lower level (dumb components).

It just seems to me that creating dumb component is still possible when @connect(ing) them - simply you pass them only primitive objects\arguments to be displayed.

Is it a good practice wiring all the components to the store via @connect? Is there any performance impact?

Any thoughts?

Answer 1

A tweet from Dan Abramov, author of Redux:

Emphasizing “one container component at the top” in Redux examples was a mistake. Don’t take this as a maxim.

Also read his replies at https://twitter.com/dan_abramov/status/668585589609005056

Answer 2

Dan Abramov addressed that in a post on Medium a couple of years ago: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.vtq34z4ir

He calls them "presentational" versus "container" components. I find the names weird and confusing, which makes it (even) harder to understand. But the goal, I gather, is to be able to concentrate the application-specific stuff (which includes connection to the specifics of the Redux store) in with your container components.

Presentational components are more isolated from your specific application. They're easier to test independently, because they're lightweight and can be stood up without invoking Redux at all. They stand a better chance of being reused, since they're not connected to the specific data format of your app (or to Redux at all).

Personally, I'm not convinced that the distinction is worth maintaining. Really light-weight, reusable components are usually imported from somebody else. Practically anything you write will end up being tied to the specifics of your data store... since that's the point of you writing it in the first place. Writing truly reusable components, which haven't been written before, is a relatively rare occurrence. If you do make one, it'll be relatively easy to extricate it after the fact. (I'm big on not over-thinking your frameworks, since you tend to get them wrong and have to refactor anyway.)

Still, it's a paradigm directly supported by the guy who invented React, and there's a huge user base out there successfully writing code with it. So I'd go with his opinion over mine, if I were you.