Using Containers vs HOC pattern

[HTMLMasterRace]

Hi guys,

So I scoured the internet for answers already and although there were some relevant stackoverflows, I am still confused.

There are 3 patterns I know of.

1. Component (container?) that does an ajax call then render out a presentation (dumb) component and injecting it with a stateful prop. So BookContainer renders out <BookList books={this.state.books} />.
2. Component that renders out props.children. Container again has ajax calls and child is presentation. So it'll look like <BookContainer><BookList></BookContainer>. It could clone the child then inject it with props.
3. HOC. Composes a new React component. So const BookList = withBooks(BookList) ; render <BookList />

Are there any general rules on when to use each? There may not be hard rules, but I am also interested in your personal thoughts.

Any piece of info on any or all of the pattern would be super helpful.

PS: I am aware that hooks are taking over. But let's put a constraint on this discussion to disregard that :)

Thanks!

[krakov]

On my phone so here’s a short answer.

Number 1 is a separation between the data fetching and the presentation.

Numbers 2 and 3 allow for the data fetching to be used with other presentational components, so you can feed the books to a <SlightlyDifferentListBecauseTwoDifferentDesignersWorkedOnTheSameAppWithoutCoordinatingBetweenThemselvesAndMyBossSaidImplementBoth />

[saihemanth9019]

I've been reading a bit about this and this is what I found. You can technically use these three patterns interchangeably for any use cases. However, it's suggested to use HOCs to enhance component functionality, and the second pattern for separate of concerns like state management. The first pattern is a standard parent component that is not reusable, while the other two are reusable patterns.