Learn about Presentational and Container components in React

Tram Ho

Containers (containers) and Presentational components (displays) are the two main components that build the hierarchy of components in React applications. React always needs components that handle logic and components that display data. Presentational components do not perform state management, container components do. Presentaional is usually a subcomponent of a container.

What are container components?

  • Container components are primarily related to the way things work
  • They rarely have any HTML except the div tag
  • Usually stateful components
  • Responsible for providing data and behavior for child components (usually presentational components)

To see more clearly, let’s see the example below:

In contrast, with presentational components?

  • Presentational components are responsible for how things are displayed
  • Contains very little logic handling within it
  • They do not know how data is loaded or data after they render
  • They are usually written as stateless functional components

For example:

With presentational components, you have different ways to define them as ordinary react components or constants. Defining constants can eliminate dependecies and code is also more concise.

Building presentational and container components effectively makes our React application reusable and maintainable are powerful aspects of ReactJS.

Reference: Container vs Presentational Components in React

Share the news now

Source : Viblo