React. Is it bad if presentational components contain container components?

Question

According to https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.i63w9pvzw

Presentational components:

• May contain both presentational and container components** inside, and usually have some DOM markup and styles of their own.
• Have no dependencies on the rest of the app, such as Flux actions or stores.

I think if presentational components contain container components, they will get depend on Flux or Redux (or whatever the container components depend on).

That will make presentational components hard to test and reuse.

Vocalism

Is there a question? – Sulphide

@Sulphide I wonder if presentational components containing container components is bad? – Vocalism

Fair enough. The answer is not straight-forward. One might argue that it would be better to architect the app such that you do not need to nest container components. For example, with redux, nothing stops you from passing the entire state object down to every component as props (and this is a common pattern), thereby eliminating the need for those containers further down the chain. But maybe you have a really good reason for doing so, like if a sub-component needs state and that state happens to be a large object, and performance might suffer if it was passed to everyone. – Sulphide

Answer 1

It's not bad, it's perfectly fine. The whole point of react-redux is to let you connect container components directly to the store without having to pass the entire store down every component as a prop. Component reuse isn't an issue, since the <Provider> component will make any connected container components work anywhere below it.

It's actually not hard to test container components either. You can make the connected component the default export, but also export the unconnected component as a named export, which you can use for tests, and manually pass it props in those tests. See the "Connected Components" section of the 'Writing Tests' part of the Redux docs for more info.

As for testing presentational components that contain container components, it won't be an problem. A shallow render will still work fine in tests (unless you're running into this issue). And if you need to mount the component in a test, you can always wrap it in a <Provider> component with a store specific to that test.

Edit: This answer is specific to Redux with react-redux. Other Flux implementations may have some difficulties with this I'm not aware of.

Streptothricin