Skip to content

Instantly share code, notes, and snippets.

@af

af/components.md

Last active January 25, 2016 21:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save af/0d680115ca7eb283c69b to your computer and use it in GitHub Desktop.
Save af/0d680115ca7eb283c69b to your computer and use it in GitHub Desktop.
Download ZIP
Presentational/Container components: are these terms misleading?
Raw
components.md

Presentational/Container have long been suggested as terms to describe two different classes of React components. However I think these terms are a bit deceptive, and don't accurately represent the differences between them:

Presentational components

  • can "contain" other components, thus they also act as containers
  • not concerned merely with "presentation" (in the same way that CSS is)

Container components

  • do more than simply "contain" other components. Containing other components is not what makes them unique
  • have an active role in accessing and mutating the state of your application. This is what differentiates them from "presentational" components.

Suggested replacement terms

I find the concepts of Container/Presentational components very useful, but also think that Active/Passive are better terms for describing the differences:

Active Components

  • Are concerned with how things work/behave
  • Interact with the store(s) for accessing your application's state
  • Act on your app state by launching actions
  • Can have changing state

Passive Components

  • Only responsible for rendering UI as a function of props
  • "Do what they're told" by their Active ancestors in the tree
  • Are not stateful
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment