Learn React 18: Writing Components as Classes

We have written all our components as functions so far in this series. However, you can also use classes to create components in React. In fact, classes were preferred for creating complex components, and functions were limited to simple components.

In this lesson from our free full-length beginner course on React 18, you'll learn how to convert our function component from the last tutorial into a class component.

Take the Course for Free

Creating a Class Component

We create a class component in React by extending React.Component as shown below. The class name is the same as the function name from the previous tutorial.

1	class RandomGenerator extends React.Component {
2	// Other code for our class
3	}

Let's begin by adding a constructor to our class that will handle initialization.

class RandomGenerator extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      randomNumber: Math.floor(Math.random() * 1000) + props.low
    };
  }
}

We pass props to the constructor method where we call the Component superclass by using super(props). We also use the constructor to initialize the state of our component with the help of the state property. The state property is actually an object which we can use to store any type of information that we need. In our case, we use it to store our randomNumber.

We will now add a render() method to the class that will render our component. It will simply contain the JSX code we wrote for rendering the component.

render() {
    return (
      <div class="container">
        <h1>Random Number Generator</h1>
        <h2>{this.state.randomNumber}</h2>
      </div>
    );
}

You might have noticed that we replaced randomNumber with this.state.randomNumber. This is because the random number is stored inside the state property of our component class.

At this stage, our component will generate a random number and show it on screen just once. This makes sense because we haven't written any code to generate a new random number periodically.

Updating the Component State

Now, I would like to introduce you to the concept of mounting and unmounting in React. A component is considered to be mounted when it is first rendered to the DOM. A component is considered to be unmounted whenever the DOM produced by the component is removed from the webpage.

Mounting and unmounting are part of a component's lifecycle. There are special methods called componentDidMount() and componentWillUnmount() which run after a component is mounted and unmounted respectively.

The code inside componentDidMount() will run after the component has rendered to the DOM. We can set up a timer here that will update the state of our component every two seconds. Here is the code for the method:

componentDidMount() {
    this.numTimer = setInterval(() => {
      let tempVal = Math.floor(Math.random() * 1000) + this.props.low;
      this.setState({ randomNumber: tempVal });
    }, 2000);
}

Did you notice the call to this.setState() inside the arrow function? This call lets React know that the state of the component has changed and it needs to be rendered again. This will then trigger a call to the render() method. The render() method will see that the value of this.state.randomNumber has changed, and React will update the DOM to reflect the new value.

We store a reference to our timer in the numTimer field so that we can destroy it later when our component unmounts. The code for componentWillUnmount() should look like this:

1	componentWillUnmount() {
2	clearInterval(this.numTimer);
3	}

Here is the complete code for our RandomGenerator component class to avoid any confusion.

class RandomGenerator extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      randomNumber: Math.floor(Math.random() * 1000) + props.low
    };
  }

  componentDidMount() {
    this.numTimer = setInterval(() => {
      let tempVal = Math.floor(Math.random() * 1000) + this.props.low;
      this.setState({ randomNumber: tempVal });
    }, 2000);
  }

  componentWillUnmount() {
    clearInterval(this.numTimer);
  }

  render() {
    return (
      <div class="container">
        <h1>Random Number Generator</h1>
        <h2>{this.state.randomNumber}</h2>
      </div>
    );
  }
}

The following CodePen demo shows our component class in action. Try to modify it so that the random number never goes above a specified limit.

Final Thoughts

We have now successfully implemented our random number generator as a class component. Using class components was the way to go when working with state in the past. However, things have changed with the introduction of hooks, and a lot of developers now prefer to use functional components. It is still a good idea to be comfortable with both approaches.