Introduction

Class-based components are one of the ways to define components in React before the introduction of functional components and hooks. They are more verbose than functional components but provide a clear structure for managing state and lifecycle methods. Let’s dive into the details of class-based components.

Creating a Class-Based Component

To define a class-based component, you start by creating a class that extends React.Component. This is crucial as it enables your component to inherit properties and methods from the React.Component class, essential for the component’s lifecycle, state management, and rendering.

1
2
3
4
5
import React, { Component } from "react";

class MyComponent extends Component {
  // Component logic and lifecycle methods go here
}

The Constructor Method in Class-Based Components

The constructor method in a class-based component is a special function that gets called automatically when a new instance of the component is created. The constructor method is the first to be executed in your component and serves a dual purpose: initializing state and binding event handlers. It’s important to call super(props) before anything else, which executes the parent class’s constructor, ensuring the component initializes correctly.

Purpose of the Constructor Method:

Initializing State: The constructor is the ideal place to set up the initial state of the component. State in React is an object where you store property values that belong to the component. When state changes, the component responds by re-rendering.

Binding Event Handlers: If you have event handlers in your component, you can bind them to the instance of the component in the constructor. This ensures that this within the event handler refers to the component instance, allowing you to update state or call other component methods.

Here’s a detailed look at the constructor method’s syntax and usage within a class-based component:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
class MyComponent extends Component {
  constructor(props) {
    super(props); // This calls the constructor of the parent class (React.Component)
    this.state = {
      name: "John",
      age: 30,
    };
    // Binding an event handler to the component instance
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // Handle event logic here
  }
}

super(props): This line is crucial. The super keyword is used to call the constructor of its parent class (React.Component). This step is necessary to ensure that your component inherits all the functionalities from React.Component, including the props system. Passing props to super ensures that this.props is set, so you can access props within the constructor.

State Initialization: The state is initialized by assigning an object to this.state. This object contains all the initial state values your component needs.

Binding Event Handlers: To ensure that this within your event handlers refers to the component instance, you bind the handlers in the constructor using this.eventHandlerName = this.eventHandlerName.bind(this). This pattern ensures that when you call this.setState or other component methods within your event handler, it operates on the correct component instance.

Best Practices

Minimize Constructor Logic: Keep the constructor as simple as possible. Heavy computations or operations (like fetching data) should be avoided in the constructor. These are better suited for lifecycle methods like componentDidMount.

Use this.state: If your state is not dependent on props, use state property to declare state outside of the constructor.

Use Arrow Functions for Event Handlers: An alternative to binding in the constructor is to define event handlers using arrow functions. Arrow functions automatically bind this to the instance of the class.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
class MyComponent extends Component {
  constructor(props) {
    super(props);
  }

  state = {
    name: "John",
    age: 30,
  };

  handleClick = () => {
    // Handle event logic here
  };
}

The Render Method in Class-Based Components

The render method is a critical component of class-based components in React. Its primary role is to describe how the component’s UI should appear by returning JSX, a syntax extension for JavaScript that looks similar to HTML. The render method is called automatically whenever the component’s state changes or when its props are updated, ensuring the UI is kept in sync with the component’s data.

Structure of the render Method The render method must always return a single parent element, which can be either a DOM element or a React component. This requirement can be fulfilled by wrapping multiple elements in a <div>, <React.Fragment>, or using the newer fragment syntax <> to avoid adding extra nodes to the DOM.

Here’s a simple structure of the render method:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
class MyComponent extends Component {
  state = {
    name: "John",
    age: 30,
  };
  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
        <p>{this.state.age}</p>
      </div>
    );
  }
}

Conditional Rendering: The render method can also use JavaScript logic to conditionally render elements. This is useful for displaying content based on the current state or props. You can use standard JavaScript conditions like if statements, conditional (ternary) operators, or logical operators to control what gets rendered.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
class MyComponent extends Component {
  state = {
    isLoggedIn: true,
  };

  render() {
    return (
      <div>
        {this.state.isLoggedIn ? (
          <div>You are logged in</div>
        ) : (
          <div>You are not logged in</div>
        )}
      </div>
    );
  }
}

Key Points to Remember

The render method is the only required method in a class component.
It should be pure, meaning it does not modify component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser.
If conditional rendering is needed, it should be handled inside the render method using JavaScript expressions.

Example: A Complete Class-Based Component

To tie everything together, let’s look at a complete example of a class-based component that uses a constructor to initialize state, and the render method to display UI:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import React, { Component } from "react";

class Greeting extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "Welcome to React!",
    };
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
        <p>Hello, {this.props.name}</p>
      </div>
    );
  }
}

export default Greeting;

Class-based components offer a structured way to create React components, especially for complex components that require the use of lifecycle methods and state management. However, with the introduction of hooks in React 16.8, functional components have become more popular due to their simplicity and ease of use.

Updating State in Class-Based Components

State management is a cornerstone of React component functionality, particularly in class-based components. It enables components to react to user input, server responses, and other dynamic data changes. To manage state effectively, you’ll often use the setState method, which schedules updates to the component’s state and tells React to re-render the component and its children with the updated state. Here’s a comprehensive guide to updating state in class-based components, including a full example.

Step 1: Setting Up the Component

First, let’s define a simple class-based component that includes a state with a counter value. This component will also include a button to increment the counter.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import React, { Component } from "react";

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

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

export default Counter;

Step 2: Implementing the incrementCount Method

To update the state when the button is clicked, we need to define the incrementCount method. This method will use setState to increment the count.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React, { Component } from "react";

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

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

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

export default Counter;

However, this direct approach can be problematic if multiple setState calls are batched together, as each call might overwrite the previous one. To ensure the count increments correctly, we should use the functional form of setState.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React, { Component } from "react";

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

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

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

export default Counter;

In the above example, we use the functional form of setState to increment the count. This is a common pattern in React, and it provides a more consistent and predictable approach to updating state.

This example demonstrates the key concepts in updating state within class-based components: initializing state, defining methods to update state using setState, correctly binding event handlers, and optionally using setState’s callback to perform actions after the state update. Following these patterns ensures that your component’s state is updated predictably and efficiently, leading to a responsive and interactive user experience.

Class Components in Reactjs Lession 12