Open In App
Related Articles

ReactJS Container and Presentational Pattern in Components

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

In this article we will categorise the react components in two types depending on the pattern in which they are written in application and will learn briefly about these two categories. We will also discuss about alternatives to this pattern.

Presentational and Container Components

The type of components is decided by components pattern. If the component decides how the data will be presented on the screen it is called as presentational component. If the component focuses on what data is to be shown to the user then it is called as container component

We will discuss individually about these components in this article.

Presentational components:

  • Mainly concerned with how things look.
  • Have no major dependencies on the rest of the app.
  • No connection with the specification of the data that is outside the component.
  • Mainly receives data and callbacks exclusively via props.
  • May contain both presentational and container components inside it considering the fact that it contains DOM markup and styles of their own.

Example: For example, the below code denotes a presentational component, and it gets its data from the props and just focuses on showing an element. 

javascript

// presentational component
const Users = props =>
(<ul>
    {props.users.map(user =>
        (<li>{itr}</li>))
    }
</ul>)

                    

Container components:

  • Mainly concerned with how things work.
  • May contain both presentational and container components but does not have DOM and markup of their own.
  • Provide the data and behavior to presentational or other container components.
  • Call flux actions and provides these as callbacks to the presentational component.

javascript

// container component
classUsersContainerextendsReact.Component{
    constructor()
    {
        this.state = {
            itr: []
        }
    }
    componentDidMount() {
        axios.get('/users').then(itr => this.setState({ users: itr }))
        )
    }
    render() {
        return <Usersusers = {this.state.itr
    } />
}}

                    

Benefits of Container/Presentational Pattern

  • Creates pure functions
  • Separates render and fetching logic
  • Makes the components more reusable
  • Testing the components is easier

Disadvantages of Container/Presentational Pattern

  • It’s alternatives perform better
  • Usage is decreased as we no longer need class components to create states.

Alternative to Presentational/Container Pattern

This pattern based approach can be easily replaced with using hooks in React. Instead, of creating different components based on the pattern we can create a single component which uses hooks to implement different functionality. Since the introduction of hooks in React the use of this pattern is reduced but it is still used in some cases as performing tests is easier in this pattern approach.



Last Updated : 01 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads