I'm referring to the two types of react components - presentation component and container component. In a more platform-agnostic description, is the container component just an adapter for a presentation component and the rest of the system? Or is it an instance of some other pattern?
When you look at the adapter-pattern which is something like a translation- or glue- pattern, the answer is: no.
Converts one interface to another so that it matches what the client is expecting
C of MVC. The same goes for the frameworks, which describe themselves as
MV* or so.
As far as I understand the distinction between
presentation component, the first one is the computational part which organizes the data (whatever is necessary to do so) and hands the data to the
presentation component whose job it is to "display" the computed results. They have a
Is a react container component an instance of the adapter pattern?
No, it isn't. It's something that in the React world is called the container component pattern. As a general pattern though it kinda fits under "delegation", as Thomas Junk already mentioned in his answer.
But more than a patterns, the "container component" builds on top of a principle: The Single Responsibility Principle.
Instead of having one component perform two functions - presentation (1), and data fetching and business logic interactions (2) - you separate the two. The container component manages the data, actions, business interactions with the rest of the app, while the presentation component only handles presentation with props it receives from its container and any user interactions are passed to the container component instead of itself interacting with the rest of the application.
This has some advantages as well put by Dan Abramov, the creator of Redux:
Better separation of concerns. You understand your app and your UI better by writing components this way.
Better reusability. You can use the same presentational component with completely different state sources, and turn those into separate container components that can be further reused.
- Presentational components are essentially your app’s “palette”. You can put them on a single page and let the designer tweak all their variations without touching the app’s logic. You can run screenshot regression tests on that page.
- This forces you to extract “layout components” such as Sidebar, Page, ContextMenu and use this.props.children instead of duplicating the same markup and layout in several container components.