Presnetational Component:
A presentational compoentn receives its data through props. It's primary function is to simply display the data it receives the way we want them to, including sytles, without modiying that data.
Container Component:
Container component is to pass data to presentational component. Since they don't render anything themselves, they usually do not contain any styling either.
In many cases, the Container / Presentational pattern can be replaced with React Hooks. The introduction of Hooks made it easy for developers to add statefulness without needing a container component to provide that state;
Pros / Cons
Pros:
Cons:
[Note]: From JS Patterns book