Understanding Class Components in React

2023-10-29

Today, I'll be explaining a more about class component in React. In React, a class component is a way to create reusable and maintainable UI elements. It was a fundamental concept in React before the introduction of functional components and hooks.

Here's an easy code example on Class Component:

import React, { Component } from 'react';

class SimpleClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello, Class Component!',
    };
  }

  render() {
    return <div>{this.state.message}</div>;
  }
}

export default SimpleClassComponent;

Here's an complex code example on Class Component:

import React, { Component } from 'react';

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

  componentDidMount() {
    // Complex logic, API calls, subscriptions, etc.
    document.title = `Count: ${this.state.count}`;
  }

  componentDidUpdate() {
    // Additional complex logic on component update
    document.title = `Count: ${this.state.count}`;
  }

  componentWillUnmount() {
    // Cleanup operations before component unmounts
    document.title = 'React App';
  }

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

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

export default ComplexClassComponent;

Top 5 Key Learnings on Class Components:

1. State Management: Class components use the state object for managing local component state, allowing dynamic updates to the UI.
2. Lifecycle Methods: Class components have lifecycle methods (e.g., componentDidMount, componentDidUpdate, componentWillUnmount) that enable developers to execute code at specific points in the component's lifecycle.
3. Event Handling: Class components often involve methods for handling user interactions (e.g., button clicks) and updating the component state accordingly.
4. Class-based Syntax: Class components use the traditional ES6 class syntax, providing a clear structure for organizing and maintaining the component's code.
5. Complex Logic: Class components are suitable for handling complex logic, side effects, and asynchronous operations due to their lifecycle methods and class structure.

Conclusion:

In conclusion while class components have been a core part of React, the introduction of functional components and hooks has become more prevalent in modern React development. Understanding class components remains valuable for maintaining legacy codebases and comprehending the evolution of React's architecture.

In contemporary React development, consider using functional components and hooks for their simplicity, readability, and improved performance.

---

Also on codewithkatyrosli.com

Understanding componentDidMount in React Class Components, 2023-11-25

This is a continuous post about class component. Read here to understand about class component. Now that we have understand what is class component, let's dive into the topic about lifecycle of a React class component.

When it comes to managing the lifecycle of a React class component, one of the key methods to grasp is componentDidMount. In this blog post, we will explore what componentDidMount is, what it does, why and when we use it, provide an example of code, and discuss three important considerations to keep in mind when using this lifecycle method.

So, what is componentDidMount? componentDidMount is a lifecycle method in React class components that gets invoked after the component has been inserted into the DOM (Document Object Model). It is a suitable place to perform actions that require interaction with the DOM or external data fetching.

Read More