Type of Components

index

• Functional Component
• Container and Presentation Components

The main take away here is the difference between class and functional components. Class components are versatile and fully featured components. They can be anything we want them to be. Functional components exchange the class component's bells and whistles for simplicity and a small performance boost.

Regular Component

import React, { Component } from 'react'

class App extends Component {
  render() {
    return <div></div>
  }
}

export default App

Pure Component

Does an automatic comparison of old and new props and state therefore not having shouldComponentUpdate.

import React, { PureComponent } from 'react'

class App extends PureComponent {
  render() {
    return <div></div>
  }
}

export default App

Functional Component

Although React is clever when it comes to rendering class components, every class component, when rendered, goes through a series of checks related to its lifecycle. If we do not need to use state or lifecycle methods, we can avoid these checks by writing a functional component.

import React, { PureComponent } from 'react'

class App extends PureComponent {
  render() {
    return <div></div>
  }
}

export default App

// simpler form:
import React from 'react'

const App = props => <div>{props.greeting}</div>

export default App

for instance we can use it for a reusable Button component that has a consistent style but receives props that define its text and click event

import React from 'react'

const Button = ({ handleClick, text })=> <button style="myButton" onClick={ handleClick }>{ text }</button>

export default Button

up

Container and Presentation Component

These are not different types of components, but instead, are a way of thinking on how to organize a React app.

Presentational components are only concerned with displaying content. They typically don't deal with state, or have a lot of added logic within them. They receive props and display content. The Button component from the functional component section above is a great example of this.

In React, we can compartmentalise - each piece can be a component (NavLinks, Menu, Search, etc..) and since they all go together, we can create a parent component, that acts as a container for everything:

import React, { Component } from 'react'
import Logo from './Logo'
import NavLinks from './NavLinks'
import DropMenu from './DropMenu'
import Search from './Search'

class NavigationContainer extends Component {

  state = {
    query: "",
    username: ""
  }

  render() {
    // <>...</> is a a React fragment - it does not render anything to the DOM, but can wrap multiple JSX elements
    return (
      <>
        <Logo />
        <NavLinks />
        <DropMenu username={ this.state.username }/>
        <Search query= {this.state.query } handleChange={ this.handleChange } handleSubmit={ this.handleSubmit }/>
      </>
    )
  }

  handleSubmit = event => { ... }
  handleChange = event => { ... }
}

Using this sort of set up, none of the imported components need to have their own state, nor do they need to have any functions defined. Container components, like NavigationContainer, deal with managing state and class methods.

Keeping all the more complex logic in one place makes it easier to follow the flow of information. It also keeps many components simpler and free of clutter.

Container components, having to deal with state, are usually class components. Presentational components are most often functional components as they don't need to contain custom methods, relying mainly on props.