Container vs. Presentational

What are components?

Components in React allow us to divide our webpage into independent and reusable pieces, which allows us to think about each piece individually. This helps with our Separation of Concerns principle as it lets us separate these pieces (components) for both functionality and presentation in our code!

Container Components

Container components are aptly named, as they are used primarily as a container for our presentational components. They are mostly concerned with how things work, and typically do not contain any HTML of their own, other than wrapping a presentational component in a <div> tag. They also typically handle state, and are responsible for providing data, and behaviors to their child components; their children are usually presentational components.

React container component example

Above is an example of how a basic container component is typically designed. Its only job is to contain the <ChildComponent />. The ChildComponent would then be responsible for whatever data we wanted to display at that particular place. Which leads us to…

Presentational Components

Presentational components are also very well name, as they are mostly concerned with how things look or are displayed, ie presented. They usually don’t know how to alter any data that they are rendering, and rarely have any state properties that are changeable internally.

Now, presentational components can be written in two different ways:

• As a class component, which will usually only contain a render method

React class component example

• As a functional component, which only returns some JSX

React functional component example

Presentational components are typically written as stateless functional components.

Regardless of which type of component you are creating, whether it’s a container component or a presentational component, they are the exact same in terms of ‘type’ of components, this is just a way of thinking about how our code is designed. Separating our code out into container and presentational components allows us to adhere to the separation of concerns principle, and makes our code easier to organize, read, and debug!