I have a question regarding the Container component pattern, which is sadly only defined in one sentence:

A container does data fetching and then renders its corresponding sub-component. That’s it. —Jason Bonta https://reactpatterns.com/#container-component

Is it ever possible to have a case where we would want to have two containers and one component, sort of like an inheritance hierarchy? So this is not a question to compare the two options below, but mainly, asking Is the pattern meant for option1?

Suppose you have the following:

API calls: A, B, C
Component Type1: needs API call A & C
Component Type2: needs API call B & C

What is the best way to use the Container pattern here?

Option 1)

ContainerA: calls API A
ContainerB: calls API B
ContainerC: calls API C

Render trees:

`ContainerA` -> `ContainerC` -> `Component`
`ContainerB` -> `ContainerC` -> `Component`



Option 2)

ContainerAC: calls API A and API C
ContainerBC: calls API A and API C

Render trees:

`ContainerAC` -> `Component`
`ContainerBC` -> `Component`




  • Option 1 allows many containers to reuse container C's code instead of duplicating it, but seems to mimic inheritance which react says not to do? (https://reactjs.org/docs/composition-vs-inheritance.html) But the technical definition of the Container pattern does not prohibit this usage?
  • Option 2 is simpler, but duplicates code.

My question was, Can option 1 ever be an acceptable use case of the Container-Component ReactJS? Thanks!

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.