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.