In this tutorial, we will explore the class components in React for those who are already familiar with functional components. Class components were the primary way of creating components in React before the introduction of functional components and Hooks. Although functional components are more commonly used today, understanding class components can be valuable when working with older codebases or when encountering specific use cases.

Can we have a joke please before we talk about class components?
Why did the React developer refuse to switch to class components?
Because they were hooked on functional components and didn’t want to go back to their “classy” past!

Now, let’s get Sirius Black. Sorry, serious.

Class components are defined using ES6 classes. The main difference between functional components and class components is that class components have state and lifecycle methods. Here is a basic example of a class component:

Let’s transform a functional component into a class component.

Functional Component

import React from 'react';

const HelloWorld = () => {
  return <h1>Hello, World!</h1>;
};

export default HelloWorld;

Class Component

import React, { Component } from 'react';

class HelloWorld extends Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

export default HelloWorld;

Let’s give them props

Functional Component

import React from 'react';

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

export default FunctionalComponent;

Class Component

import React, { Component } from 'react';

class ClassComponent extends Component {
  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}!</h1>
      </div>
    );
  }
}

export default ClassComponent;

In a functional component, we define a JavaScript function that takes props as an argument and returns JSX.
In contrast, a class component is a class that extends React.Component and has a render method that returns JSX. To access props in a class component, we use this.props.

Let’s make our components State full.

Functional Components

import React, { useState } from 'react';

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

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

export default FunctionalComponent;

Class Components

import React, { Component } from 'react';

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

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default ClassComponent;

In a functional component, we use the useState Hook to manage state. The useState function returns an array with two elements: the current state value and a function to update the state. In this example, we use array destructuring to assign these elements to count and setCount.

In a class component, we manage state by initializing it in the constructor with this.state and updating it with this.setState. The state is an object containing key-value pairs, and we access the state using this.state. To update the state, we use the this.setState method, passing in an object with the updated key-value pairs.

That’s all for now, In an upcoming post, we’ll delve into the thrilling world of lifecycle – oh wait, I meant life… or did I? Stay tuned!

Until then,
May your components live in a state of bliss, showered with props and forever useState-ing.
Happy Coding!!!