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?
ContainerA: calls API A ContainerB: calls API B ContainerC: calls API C
`ContainerA` -> `ContainerC` -> `Component` `ContainerB` -> `ContainerC` -> `Component`
ContainerA ContainerB ContainerC Component
ContainerAC: calls API A and API C ContainerBC: calls API A and API C
`ContainerAC` -> `Component` `ContainerBC` -> `Component`
ContainerAC 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!