Class components versus functional components

We just defined React components as functions that return a piece of the UI. This is a useful way of thinking about them, and is certainly true for our App component. However, there's another way of writing React components.

Right now, our App component is a functional component. This means it's literally written as a function, but you can also write components as JavaScript classes. These are called class-based or stateful components (we'll talk about the stateful part in a bit).

JavaScript classes are a new feature of ES6. They work in a similar (but not identical) way to classes in other languages. We won't delve too deep into them here, but for our purpose, you can do the following:

• Have a class extend another class (and inherit its properties)
• Create an instance of a class with the new keyword (that is, instantiate it)

Let's see an example by converting our App component into a class-based component.

Every class component must do two things: it must extend the Component class from the React library, and it must have a render method.

Let's start by importing the Component class from React:

import React, { Component } from 'react';

For those of you unfamiliar with this syntax, it's an example of object destructuring in ES6. Consider the following:

const property = object.property;

Object destructuring turns the preceding code into this, which saves some typing, but does the same thing:

const { property } = object;

Anyway, now that we've imported our Component class, let's make a class that extends it; delete our App function, and write the following:

class App extends Component {

}

JavaScript classes function a lot like objects. They can have properties that are either values or functions (called methods). As we said earlier, we need a render method. Here's what that looks like:

class App extends Component {
  render() {

  }
}

What does the render method do? In essence, when we wrote our App as a functional component, it consisted solely of a render method. The whole thing was just a big render(). So, the render method does what we expect from a React component: it returns a bit of the view:

class App extends Component {
  render() {
    return <h1>Hello from React!!</h1>;
  }
}

If you start up the app (or if it's already running), you'll note that nothing has changed at all.

So, what is the difference between a class component and a functional component?

A best practice is to try to make as many small, functional components as possible in your application. They're a bit faster performance-wise, and the React team has expressed an interest in optimizing the library for functional components. They're also easier to understand.

However, class components give us a lot of handy functionality. They can have properties, which we then use in the render method:

class App extends Component {
  greeting = 'Hello from React!!';

  render() {
    return <h1>{this.greeting}</h1>;
  }
}

We can call methods from the render method:

class App extends Component {
  logGreeting = () => {
    console.log('Hello!');
  }

  render() {
    this.logGreeting()
    return <h1>Hello from React!!</h1>;
  }
}

As we discussed earlier, classes can be instantiated (in syntax such as const app = new App()). This is what React does in our ReactDOM.render call; it instantiates our App and then calls the render method to get the JSX.

Therefore, it's still useful to think of React components as functions that return bits of view. Class components just add a little extra functionality wrapped around that render function.