History lesson: what are class components in React?

Class Components: The Old Guard

As young developers using and learning React for the last few years, we are mostly familiar with functional components.

But class components are a topic that is often asked about in job interviews. Let me take you on a brief history lesson.

In the realm of React development, class components were once the undisputed champions. They were the go-to choice for building reusable and dynamic user interface elements. Why were they so popular, and why did developers rely on them for so long?

Class components, also known as stateful components, offered a structured way to create and manage complex UI elements. Developers could define a JavaScript class that extended React.Component, and within that class, they could encapsulate the component's logic, state, and lifecycle methods. Each class had to have a render method to show that returned the JSX. This approach provided a clear and organized structure for building dynamic web applications.

Here's a quick overview of the defining characteristics of class components:

1. Lifecycle Methods:

Class components came equipped with a range of lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount. These methods allowed developers to respond to component events and manage side effects.

2. State Management:

Class components had a built-in state management system using this.state, enabling them to hold and update data that influenced the component's behavior and rendering.

3. Richer Feature Set:

In the earlier days of React, class components offered more advanced features for handling complex scenarios. They were essential for managing local component state, making network requests, and handling form submissions.

4. Component Hierarchy:

Class components were instrumental in organizing component hierarchies in larger applications. They allowed developers to create a clear structure for their code, making it easier to reason about and maintain.

import React, { Component } from 'react';

class ClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }

  componentDidUpdate() {
    document.title = `Count: ${this.state.count}`;
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

export default ClassComponent;

The Rise of Function Components

Fast forward to React 16.8, and a seismic shift occurred in the React ecosystem with the introduction of functional components. Functional components, often referred to as stateless or presentational components, were initially seen as lightweight and simplistic alternatives to class components. However, they've since become the new standard for React development. But why?

1. Simplicity:

Functional components, as the name suggests, are based on JavaScript functions. They are inherently concise and straightforward. This simplicity makes them easier to write, read, and maintain.

2. No More Classes:

Gone are the days of defining classes and constructors. Functional components allow you to define UI elements as pure functions that take in props and return JSX. This reduction in boilerplate code is a breath of fresh air for developers.

function FunctionalComponent(props) {
  return <div>Hello, {props.name}!</div>;
}

3. The Power of Hooks:

React's development team introduced hooks like useState and useEffect with functional components. These hooks revolutionized the way we handle state and side effects, bringing them on par with what class components offered.

import React, { useState, useEffect } from 'react';

function FunctionalComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

4. Community Adoption:

The React community overwhelmingly embraced functional components and hooks, leading to a wealth of resources, libraries, and best practices. This collective shift in focus away from class components has accelerated their decline.

Conclusion

In conclusion, class components, once the stalwarts of React development, have gradually taken a back seat to functional components. The simplicity, reduced boilerplate code, and the introduction of hooks have made functional components the preferred choice for modern React applications. As a developer, understanding both class and functional components will enable you to navigate legacy codebases while harnessing the power and elegance of functional components in your new projects.