Class Component vs Functional Component

Class Components

Class components in React are more complex than functional components because they allow more features such as local state management and lifecycle methods. A class component requires extending React.Component and must include at least the render() method, which returns React elements.

Here is a basic syntax example for a class component:

import React, { Component } from 'react';
class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

In this example, Welcome is a class component that takes props and renders a greeting message. Unlike functional components, class components make use of this to access props and state. This makes them suitable for more complex scenarios where state or lifecycle handling is necessary.

Class components can also manage local state and react to lifecycle events, such as when a component mounts or updates. This capability is essential for handling side effects, managing subscriptions, and more, which can be crucial for more complex applications.

Counter Using Class Components

Now let's look at how a counter would be implemented using class components in React. This example will help illustrate the management of state and lifecycle methods that are available in class components, providing a more traditional approach compared to functional components.

Here is the complete code for a counter using a class component:

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 });
  };
 decrementCount = () => {
    this.setState({ count: this.state.count - 1 });
  };
 render() {
    return (
      <div>
        <h1>Current Count: {this.state.count}</h1>
        <button onClick={this.incrementCount}>Increase</button>
        <button onClick={this.decrementCount}>Decrease</button>
      </div>
    );
  }
}

In this example, the Counter class component maintains its state that includes a count variable. It uses the setState method to update the state whenever the increase or decrease buttons are clicked. The render method then returns the UI part, which shows the current count and buttons to modify it. This setup demonstrates how class components can handle more complex state changes and interactions within a component.

Functional Components vs Class Components

Frequently Asked Questions

Can functional components have state?

Yes, functional components can manage state using the useState hook, allowing them to maintain internal state without needing to be class components.

When should I use class components over functional components?

Use class components when you need more control over the component lifecycle, or when dealing with complex state logic that might benefit from being in a class structure.

Are functional components better than class components?

"Better" depends on the context. Functional components are generally simpler and more concise, making them ideal for most cases, especially with the addition of hooks. However, class components might be necessary for more complex scenarios.

Conclusion

In this article, we have learned the distinct differences between functional and class components in React. We covered the simplicity and efficiency of functional components, their use of hooks for managing state and lifecycle events, and compared these features against the more traditional class components, which offer more control through direct access to lifecycle methods and state management. 

You can refer to our guided paths on the Coding Ninjas. You can check our course to learn more about DSA, DBMS, Competitive Programming, Python, Java, JavaScript, etc. Also, check out some of the Guided Paths on topics such as Data Structure andAlgorithms, Competitive Programming, Operating Systems, Computer Networks, DBMS, System Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry.