Components in React

React components are independent and reusable bits of code. A React component takes an optional input and returns a React element which is rendered on the screen.

There are two main types of React components:

1. Functional Components are stateless.
2. Class Components are stateful.

Functional Components

A functional component is just a plain javascript function that takes props as an argument and returns a react element. Functional components do not require data from other components and don’t interact with any other components.

What Functional Components CAN do:

1. Accept and use props
2. Display data in some form (return a react element)

What Functional Components CAN NOT do:

1. Use this.state
2. Use lifecycle methods (e.g. componentDidmount).
3. Use render method

An example of a functional component:

import React from "react"

const Welcome = props => {
  return (
    <div>
      <h1>Hello, {props.name}</h1>
    </div>
  )
}

export default Welcome 

Class Components

These components are created using ES6’s class syntax. They have some additional features such as the ability to contain logic (for example methods that handle onClick events), local state (more on this in the next chapter) and other capabilities to be explored in later sections of the book.

What Class Components CAN do:

1. Make use of ES6 class and extend the Component class in React
2. Use this.state
3. Use lifecycle methods (e.g. componentDidmount).
4. Use render method
5. Accept pass props and access them with this.props

An example of a class component:

import React, {Component} from "react"

class Welcome extends Component {
  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}</h1>
      </div>
    )
  }
}
export default Welcome

Which component type to use?

Always use a functional component unless you need to:

1. Manage state
2. Add lifecycle methods to the component
3. Add logic for event handlers

However, there is another approach to differentiate components based on behavior logic.

Presentational Components

The presentational component is often called a stateless functional component that takes props and renders UI. Same as a functional component, a presentational component can’t:

1. Use this.state
2. Use lifecycle methods (e.g. componentDidmount).
3. Use render method

An example of a presentational component:

import React from 'react'

const Book = ({ title, img_url }) => (
  <div className="book">
    <img src={ img_url } alt={title}/>
    <h3>{ title }</h3>
  </div>
)

export default Book

Container Components

Container components will deal with the behavioral part. A container component tells the presentational component what should be rendered using props. It shouldn’t contain limited DOM markups and styles. If you’re using Redux, a container component contains the code that dispatches an action to a store. Alternatively, this is the place where you should place your API calls and store the result into the component’s state.

Here’s a concise definition of the container component pattern:

• Container components are primarily concerned with how things work
• They rarely have any HTML markup of their own, aside from a wrapping <div>
• They are often stateful
• They are responsible for providing data and behavior to their children (usually presentational components).

An example of a container component:

class BookList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      books: []
    };
  }

  componentDidMount() {
    fetch('https://learn-co-curriculum.github.io/books-json-example-api/books.json')
      .then(response => response.json())
      .then(bookData => this.setState({ books: bookData.books }))
  }

  renderBooks = () => {
    return this.state.books.map(book => {
      return (
        <div className="book">
          <img src={ book.img_url } />
          <h3>{ book.title }</h3>
        </div>
      )
    })
  }

  render() {
    return (
      <div className="book-list">
        { this.renderBooks() }
      </div>
    )
  }
}

The main thing to keep in mind here is that container components and presentational components go together. In fact, you can think of them as part of the same design pattern. Where presentational components don’t manage state, container components do. Where presentation components are usually subordinate “children” in a component hierarchy, container components are in almost every case the “parents” of presentational components.

PureComponent

Pure components are primarily used to provide optimizations. They are the simplest and fastest components we can write. They do not depend or modify the state of variables outside its scope. Hence, why pure components can replace simple functional components.

But, one major difference between a regular React.Component and a React.PureComponent is that pure components perform shallow comparisons on state change. Pure components take care of shouldComponentUpdate() by itself. If the previous state and/or props are the same as the next, the component is not re-rendered.

React.PureComponent is used for optimizing performance, and there is no reason why you should consider using it unless you encounter some sort of performance issue.

import React from ‘react
class Welcome extends React.PureComponent{
  render(){
    return (
      <div>
        <h1>Welcome!</h1>
      </div>
    )
  }
}
export default Welcome

Finally, always think about component roles in the App before going with any type.

React Container Components - Learn.co