Types of components: Functional and Class

Functional components are simple JavaScript functions. They accept props as an argument and return React elements. These components are easier to write and understand.

Example:

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

In this example, Greeting is a functional component. It receives props and returns an h1 element.

Class Components

Class components are more powerful. They allow the use of state and lifecycle methods. These components are written using ES6 classes.

Example:

import React, { Component } from 'react';

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

export default Greeting;

Here, Greeting is a class component. It extends React.Component and uses this.props to access the props.

Differences and Choices

Simplicity: Functional components are simpler. They are preferred when state or lifecycle methods are not needed.

State and Lifecycle: Class components are necessary for complex states and lifecycle methods. With the introduction of Hooks, it is possible to use state and effects in functional components.

Performance: Functional components generally have better performance. They are optimized by React internally.

Conclusion

Functional components are great for simple logic without state. Class components are useful for complex logic with state and lifecycle.

However, with Hooks, many developers prefer functional components for their simplicity and flexibility.

Compartilhar

Compartilhar

Siga-me