There are some differences between Functional component and class component.
Functional Component:
The simplest way to declare a component in React.
you need only to declare a function that returns a jsx.
example:
const MessageComponent = ({ name }) => { return <h1>Hi {name}</h1> }
in addition to since introduction of React Hooks you can do most of functionalities using functional component
componentDidUpdate => useEffect(fn)
componentDidMount => useEffect(fn, [])
state => useState()
Class Component:
the robust version of the component. With class component you can do more.
Props will by default, in the class context this.props.
You can use state, local variable for your component.
You can add many class's method that share the same state.
export default class MessageComponent extends Component {
state = {
message: 'default message'
}
renderMessage = () => {
return (
<h1>
Hi {this.props.name}
</h1>
)
}
render() {
return (
<div>
{this.renderMessage()}
</div>
)
}
}
Class Component VS Functional Component
The major reason to not using class component is when you only need a simple component like a button, card, or representational component. If your component doesn't need a complex state, complex logic, functional component is best for you.
