Discussion on: Is it true that components in a ReactJS app should be divided into container components and presentational components?

View post

To be true is approach is a little bit outdated when you are using hooks. Introducing hooks was breaking this rule as hooks are our "containers".

In old approach we separate concerns in this way:

// LoremContainer.js

class LoremContainer extends PureComponent {
 componentDidMount() {
  // perform redux actions
 }

 render () {
  return <LoremComponent {...this.props} />
 }
}

export default connect(reduxProps, reduxActions)(LoremContainer)

// LoremComponent.js
class LoremComponent extends PureComponent {
 render () {
  // component markup
 }
}

Now when we are using hooks we are using something like:

// LoremComponent.js
const LoremComponent = () => {
 const { props, actions } = useRedux(reduxProps, reduxActions)

 return (
  // component markup
 )
}

// useRedux.js
const useRedux = (props, actions) => {
 // perform redux bindings

return { props, actions }
}

Summary:
We replace container-component technique in favor of using hooks but we still use separating concerns

sunflowerseed • Mar 9 '20 • Edited

in the past (without hooks), isn't it true that we can also get by if we use connect and just directly connect to LoremComponent? In the past we didn't have to use a container... but I guess if it is like a component that has 3 other components, then it makes sense to have a container...

but even so... the container can just be a presentational container... and contain 3 stateful components...

or maybe it the past, it means, to always use stateful components (to be container components), and purely non-stateful component (to be presentational components)...